在React.render（）中返回多个元素

小编典典

在React.render（）中返回多个元素

reactjs

我是新手，遇到此问题：

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标签或每一行创建一个componenet，还是可以以这种方式呈现。

有什么建议吗？

阅读 1196

2020-07-22

共1个答案

小编典典

在React <v16.0中，该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 />
    </>
  );
}

2020-07-22