在 React.render() 中返回多个元素

Question

我是 react 新手，遇到了这个问题：

render: function(){
    return (
        <h3>Account</h3>
        <a href="#" onClick={some_event}>Login</a>
        <a href="#" onClick={some_event}>Logout</a>
)}

当我这样渲染时，它会给我错误提示，例如 multiple components must wrapt with end

我应该为每个 html 标记或每一行制作一个组件还是我可以用那种方式渲染..

有什么建议吗？

Answer 1

在 React render 方法只能渲染单个根节点。 （更新：这在 v16 中有所改变，见下文）。在您的情况下，您将返回 3 个节点。为了解决这个问题，您可以将 3 个节点包装在一个根节点中：

render: function(){
  return (
    <div>
      <h3>Account</h3>
      <a href="#" onClick={some_event}>Login</a>
      <a href="#" onClick={some_event}>Logout</a>
    </div>
)}

在 React v16 中，render() 可以返回一个元素数组。

与其他数组一样，您需要为每个元素添加一个键以避免出现键警告：

render() {
  return [
    <ChildA key="key1" />,
    <ChildB key="key2" />,
    <ChildC key="key3" />,
  ];
}

另一种选择是使用Fragment。片段让您可以对子列表进行分组，而无需向 DOM 添加额外的节点。

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

还有一个简短的语法 (<>) 用于声明片段：

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Answer 2

返回一个元素数组，以逗号分隔。

render: function(){
  return ([
    <h3>Account</h3>,
    <a href="#" onClick={some_event}>Login</a>,
    <a href="#" onClick={some_event}>Logout</a>
  ])
}

Answer 3

您可以在 React 16.2+ 中为 fragments 使用以下语法：

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Answer 4

React.render 是一个返回 DOM 元素的 JavaScript 函数。由于在 JavaScript 中，函数不能返回多个表达式，所以我们不能在 React 中返回多个元素。 该函数在“return”关键字之后立即返回第一个表达式，然后函数终止。这就是我们能够做到这一点的原因：

如果（1）{ 返回 1 } 返回 2

Answer 5

有几个选项：

1. 只需将其包裹在任何<div></div> 或<section></section> 中即可。 render() 应该返回单个元素。

2. 您可以将其拆分并拥有多个组件，这些组件实现了一些更好的专用逻辑，并且在React中曾经是一个很好的实践@