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

Question

我是新的反应,我遇到了这个问题:

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

该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" />,
  ];
}

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

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

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+中的片段使用以下语法：

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