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

Posted 2023-02-21

【中文标题】如何在反应中从渲染函数返回一个空的jsx元素？

【英文标题】：How to return an empty jsx element from the render function in react?

【发布时间】：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：会是这样的，是的。 :-) 在他们更新之前，我们无法正确回答问题。

【参考方案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 <></>;