如何在反应中从渲染函数返回一个空的jsx元素？答案

【问题标题】：How to return an empty jsx element from the render function in react?如何在反应中从渲染函数返回一个空的jsx元素？
【发布时间】：2018-01-01 11:58:28
【问题描述】：

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

未捕获的类型错误：无法读取 null 的属性“样式”

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

谢谢！

【问题讨论】：

@Rajesh 抛出与(null)相同的错误
React 文档say you should be able to return null，所以奇怪的是这不起作用。
返回null 工作正常。请使用 Stack Snippets（[<>] 工具栏按钮）用 runnable minimal reproducible example 更新您的问题，展示这样做的问题。 Stack Snippets 支持 React，包括 JSX； here's how to do one.
我很抱歉。急忙发表评论。您是否在其他任何地方操作此组件的样式
@Rajesh：会是这样的，是的。 :-) 在他们更新之前，我们无法正确回答问题。

标签： javascript reactjs react-native jsx

【解决方案1】：

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

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

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

从官方文档中提取的示例。

所以在你的情况下，返回一个没有任何孩子的 Fragment 是可行的。

  return <></>;

【讨论】：

【解决方案2】：

我认为只需在您的部分添加{ null } 而不是null 以显示空组件。

你试过了吗？

【讨论】：

【解决方案3】：

好的，Facebook says：

自从 React 发布以来，人们一直在使用变通方法来“渲染什么都没有”。通常这意味着返回一个空的 or 。有些人甚至变得聪明并开始返回以避免无关的 DOM 节点。我们终于提供了一个“有福”的解决方案允许开发人员编写有意义的代码。返回 null 是一个向 React 明确指示您不希望呈现任何内容。在幕后，我们使用一个元素来完成这项工作，虽然将来我们希望不要在文档中添加任何内容。平均而言时间，元素不会以任何方式影响布局，因此您可以今天使用 null 感觉很安全！

【讨论】：

【解决方案4】：

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

<React.Fragment></React.Fragment>

【讨论】：

请考虑在您的答案中添加某种形式的解释或更详细的信息。通常不鼓励仅使用代码回答。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

使用反应片段>。它的优点之一是它不会在渲染的组件中创建额外的 Dom 节点（例如空的 div 标签）。

您可以使用三元条件使您的代码更具可读性。

    render() {
        ( this.state.users === undefined ) ?
            return <></>   
        : return <div>We have users</div>;
    }

或者更简单的语法是

    render() {
        ( this.state.users) ?
            return <div>We have users</div>  
        : return <></>;
    }

【讨论】：