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

Intent intent = new Intent(LoginActivity.this, HomeActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent);方法只能render a single root node（更新：这在v16中有所改变，见下文）。在您的情况下，您将返回3个节点。为了解决这个问题，您可以将3个节点包装在单个根节点中：

render

更新在React v16中，render: function(){ return ( <div> <h3>Account</h3> <a href="#" onClick={some_event}>Login</a> <a href="#" onClick={some_event}>Logout</a> </div> )}现在可以返回元素数组。这称为Fragment。

render()

还有一个用于声明片段的短语法（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 +中使用fragments的以下语法：

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

Answer 4

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

if（1）{ 返回1 } 返回2

Answer 5

选项很少：

只需将其打包在任何<div></div>或<section></section>中即可。 render()应返回单个元素。
您可以将其拆分并拥有多个组件，这些组件实现了一些更好的专用逻辑，并且曾经是React

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

5 个答案: