Reactjs 即使使用单个父列表和子列表，也会对条件渲染错误作出反应

学习了一些React，但在我看来，React本身似乎存在一个条件渲染错误

假设我有一个

Foo

组件，如下所示：

foo.js 请注意上面的Foo组件，只返回一个父div，而不是数组。如果它是一个数组，那么是的，我同意这个错误

React文件示例中给出的官方示例如下：

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

---

谢谢大家的解释。

您有语法错误

          <div>one</div><div>two</div><div>three</div

---

onetwother您有语法错误

          <div>one</div><div>two</div><div>three</div

onetwotree您是否尝试添加

return(
      <div>
        { isLoggedIn ? (
          <Fragment><div>one</div><div>two</div><Fragment>
        ) : (
          <Fragment><div>one</div><div>two</div><div>three</div><Fragment>
        )}
      </div>
    );

返回(
{伊斯洛格丁(
一二
) : (
一二三
)}
);
您是否尝试添加

return(
      <div>
        { isLoggedIn ? (
          <Fragment><div>one</div><div>two</div><Fragment>
        ) : (
          <Fragment><div>one</div><div>two</div><div>three</div><Fragment>
        )}
      </div>
    );

返回(
{伊斯洛格丁(
一二
) : (
一二三
)}
);
您正在返回条件中的2或3个div。相反，您应该将它们包装到on div中并返回

请注意下面的包装器div

{ isLoggedIn ? (
      <div className='wrapper'><div>one</div><div>two</div><div>
    ) : (
      </div className='wrapper'><div>one</div><div>two</div><div>three</div></div>
    )}

{isLoggedIn(
一二
) : (
一二三
)}

还请注意，下面有一些小的打字错误

<div>one</div><div>two</div><div>three</div

onetwotree您在条件中返回2或3个div。相反，您应该将它们包装到on div中并返回

请注意下面的包装器div

{ isLoggedIn ? (
      <div className='wrapper'><div>one</div><div>two</div><div>
    ) : (
      </div className='wrapper'><div>one</div><div>two</div><div>three</div></div>
    )}

{isLoggedIn(
一二
) : (
一二三
)}

还请注意，下面有一些小的打字错误

<div>one</div><div>two</div><div>three</div

onetwother您需要包装在条件中渲染的元素

return(
  <div>
    { isLoggedIn ? (
      <div><div>one</div><div>two</div></div>
    ) : (
      <div><div>one</div><div>two</div><div>three</div></div>
    )}
  </div>
);

返回(
{伊斯洛格丁(
一二
) : (
一二三
)}
);

请注意嵌套条件元素周围的额外
div
，您需要包装在条件中呈现的元素

return(
  <div>
    { isLoggedIn ? (
      <div><div>one</div><div>two</div></div>
    ) : (
      <div><div>one</div><div>two</div><div>three</div></div>
    )}
  </div>
);

返回(
{伊斯洛格丁(
一二
) : (
一二三
)}
);

注意嵌套条件元素周围的额外
div

语法错误：相邻的JSX元素必须包装在封闭标记中？

您以错误的方式返回多个同级JSX元素

在Foo中：

return(
      <div>
        { isLoggedIn ? (
          <div>one</div> //are siblings without 
          <div>two</div> //wrapping in container element.
        ) : (
          <div>one</div> //are siblings without 
          <div>two</div> //wrapping in 
          <div>three</div>//container element.
        )}
      </div>
    );

语法错误：相邻的JSX元素必须包装在封闭标记中？

您以错误的方式返回多个同级JSX元素

在Foo中：

return(
      <div>
        { isLoggedIn ? (
          <div>one</div> //are siblings without 
          <div>two</div> //wrapping in container element.
        ) : (
          <div>one</div> //are siblings without 
          <div>two</div> //wrapping in 
          <div>three</div>//container element.
        )}
      </div>
    );

抱歉的输入错误，但在修复输入错误后仍会出现错误。抱歉的输入错误，但在修复输入错误后仍会出现错误。如果我将另一层div包装到多个元素中，这似乎可以解决问题，但我想知道为什么需要这样做？React中的一个简单规则。无论返回到哪里，始终返回元素，而不是多个元素。在您的示例中，在true条件下返回2个div，在false条件下返回3个div。@Zhang，我希望这个解释有帮助。：）因此，只有一个React的细节没有被记录下来，而是从艰苦的过程中学习到的？我不能对完整的React文档发表评论，因为我没有阅读其中的每一行：）。但无论我读过什么，质量都非常好，我很确定文档中提到了这一点（可能是间接的）。如果我在多个元素中包装另一层div，这似乎可以解决问题，但我想知道为什么需要它？React中的一个简单规则。无论返回到哪里，始终返回元素，而不是多个元素。在您的示例中，在true条件下返回2个div，在false条件下返回3个div。@Zhang，我希望这个解释有帮助。：）因此，只有一个React的细节没有被记录下来，而是从艰苦的过程中学习到的？我不能对完整的React文档发表评论，因为我没有阅读其中的每一行：）。但无论我读过什么，质量都很好，我很确定文档中提到了这一点（可能是间接的）。Fragment也像ivp的答案一样，将额外的
包装在元素列表中，但真正的问题是为什么这是必要的？请注意：Fragment也是一个正确的答案。然而，在早期版本中没有片段的概念。因此，使用旧的react版本的代码将无法使用Fragment。Fragment的工作方式也类似于ivp的答案，即在元素列表周围包装额外的
，但真正的问题是为什么需要这样做？请注意：Fragment也是一个正确的答案。然而，在早期版本中没有片段的概念。因此，不会使用旧版本的react来处理代码。我没有返回元素Shubham的列表，我返回的是一个包含子元素的单亲div节点，根据react的文档，这是非常好的。我猜您是在返回多个元素，可能不是来自渲染，但在这里的条件渲染中有两个
我来自不同的背景，但我不知道React中的三元运算符被视为另一个“虚拟组件”，在幕后具有自己的渲染调用。是的，它们被视为单独的JSX元素块。考虑到另一个问题解决了您的问题，我将其标记为重复。我没有返回元素列表Shubham，我返回的是一个包含子元素的单亲div节点，根据React的文档，这是非常好的。我猜您正在返回多个元素，可能不是来自渲染，但在这里的条件渲染中有两个
我来自不同的背景，但我不知道React中的三元运算符被视为另一个“虚拟组件”，在幕后具有自己的渲染调用。是的，它们被视为单独的JSX元素块。考虑到另一个问题解决了你的问题，我将它标记为副本
<React.Fragment>
  <div>one</div>
  <div>two</div>
</React.Fragment>