javascript - 如何从react中的渲染函数返回一个空的jsx元素？

Question

我在react中有一个代码看起来像这样:

class UserManagement extends React.Component {
    constructor() {
        super();
        this.state = {
            users: undefined,
        };
    }

    componentWillMount() {
        // load the users state with a Promise
        setTimeout(() => {
          this.setState({users: []});
        }, 800);
    }

    render() {
        if ( this.state.users === undefined ) {
            // until the users state is updated, I want to return an empty element
            return null;
        }

        // real site rendering
        return <div>We have users</div>;
    }
}

ReactDOM.render(
  <UserManagement />,
  document.getElementById("root")
);

<div>Will be blank at first while we don't have users, then show "We have users" after 800ms when we have users</div>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

我的问题是:如何返回空元素，直到返回用户状态？我试图返回(null)按照某些地方的建议，但浏览器会引发此错误:

Uncaught TypeError: Cannot read property 'style' of null

我知道可以选择返回 (<div></div>) ，但我不确定这是否是本例中的最佳实践。

谢谢!

Answer 1

以防万一有人想要另一种方法:

从 React v16.2 开始，您可以使用 Fragments允许添加一个空的 JSX 标签，如下所示:

  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );

示例摘自官方文档。

因此，就您而言，返回没有任何子项的片段是可行的。

  return <></>;