小编典典

在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,还是可以以这种方式呈现。

有什么建议吗?


阅读 1197

收藏
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