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

Question

我是 React 新手，遇到了这个问题:

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

当我像这样渲染时，它会给我错误消息，比如多个组件必须用 end 包装

我应该为每个 html 标签或每一行创建一个组件吗？或者我可以用这种方式渲染..

有什么建议吗？

Answer 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 />
    </>
  );
}