我如何渲染兄弟元素而不将它们包装在父标签中？
在大多数情况下，有一个父标签不是一个问题。
React.createClass({ render: function() { return ( <tbody> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> </tbody> ); } }); 但是在某些情况下，在一个没有父项的渲染函数中有兄弟元素是有意义的，特别是在一个表的情况下，你不想在一个div包含一个表行。
React.createClass({ render: function() { return ( <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> ); } });
第二个例子给出了以下错误： Adjacent XJS elements must be wrapped in an enclosing tag while parsing file 。
我怎样才能渲染两个兄弟元素没有包装在一个<div>或类似的东西？
目前这是一个限制，但将来可能会被修正（ 在github回购中存在一些未解决的问题 ）。
现在，您可以使用返回数组的函数（这基本上是一个无状态的组件）：
function things(arg, onWhatever){ return [ <tr><td>Item 1</td></tr>, <tr><td>Item 2</td></tr> ]; }
并在你的组件中使用。
return ( <table><tbody> {things(arg1, this.handleWhatever)} {things(arg2, this.handleWhatever)} </tbody></table> );
更新
在React 16中，你将能够从渲染返回一个数组。
呜呼！ React团队最终解决了这个问题。 截至React v16.0，你可以这样做：
render() { // No need to wrap list items in an extra element! return [ // Don't forget the keys :) <tr key="a"><td>Item 1</td></tr>, <tr key="b"><td>Item 2</td></tr> ]; }
请参阅完整的博客文章，解释“新渲染返回types：片段和string” 。
你可以把它包装到括号中，如下所示：
React.createClass({ render: function() { return ( [ <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> ] ); } });
这个例子对我来说很好：
let values = []; if (props.Values){ values = [ <tr key={1}> <td>props.Values[0].SomeValue</td> </tr> , <tr key={2}> <td>props.Values[1].SomeValue</td> </tr> ]; } return ( <table className="no-border-table table"> <tbody> <tr> <th>Some text</th> </tr> {values} </tbody> </table> )
像这样的语法为我工作
this.props.map((data,index)=>{return( [ <tr>....</tr>,<tr>....</tr>];)});
