我想在render（）{return中使用两个tr

Question

我想在返回中使用两个tr标记，如下所示：

render() {
  return<tr>row1</tr><tr>row2</tr>
}

它给了我错误：相邻的JSX元素必须包装在一个封闭的标记中。

我知道我们需要将它们包装在一个通用组件中。但是，如果我在div标签中包装，例如：

return <div><tr>row1</tr><tr>row2</tr></div>

然后我的布局发生了变化。

有没有办法达到要求。

Answer 1

如果你真的想要渲染两行而不用父包装它们（比如td，table左右），我建议你创建第二个组件，相应地“包装”它的子组件。但是，这仅适用于React16以上。

const Main = props => {
 return props.children
}

在您的render方法中：

render() {
  return (
    <Main> 
      <tr>Row 1</tr>
      <tr>Row 2</tr>
    </Main>
  )
}

还有一个npm包可以根据需要处理：https://github.com/gajus/react-aux