我是新手,遇到此问题:
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
multiple components must wrapt with end
我应该为每个html标签或每一行创建一个componenet,还是可以以这种方式呈现。
有什么建议吗?
在React <v16.0中,该render方法只能呈现单个根节点。( 更新: 这在v16中已更改,请参见下文)。就您而言,您将返回3个节点。为了解决这个问题,您可以将3个节点包装在一个根节点中:
render
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()
与其他数组一样,您需要为每个元素添加一个键,以避免出现键警告:
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 /> </> ); }