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)，但浏览器会出现此错误：

未捕获的TypeError：无法读取null的属性'style'

我知道返回(<div></div>)的选项，但我不确定这是这种情况下的最佳做法。

Thnaks！

Answer 1

我认为只需在您的部分中添加{ null }而非null即可显示空组件。

你有没有尝试过？

Answer 2

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

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

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

示例摘自官方文档。

因此，在您的情况下，返回没有任何子项的Fragment是可行的。

  return <></>;

Answer 3

您需要将其包装在React.Fragment标记中。

<React.Fragment></React.Fragment>

Answer 4

我认为您应该添加三元运算符，例如：

this.state.users? return null : return <div>We have user<\div>

Answer 5

好的Facebook says：

自从React发布以来，人们一直在使用工作来“渲染” 没什么“。通常这意味着返回一个空的或。有些人甚至聪明起来，开始回避避免无关的DOM节点。我们终于提供了一个“有福”的解决方案允许开发人员编写有意义的代码返回null是一个显式指示React你不想要渲染任何东西。然而，在幕后，我们使用一个元素来完成这项工作在未来，我们希望不在文档中添加任何内容。在意思是时间，元素不会以任何方式影响布局，所以你可以今天使用null感觉安全！

如何从render函数中返回一个空的jsx元素？

5 个答案: