小时候如何在 React 中包装表格的 tr

Question

如何将 {this.props.children} 包装在父亲组件中？

显然，div 是不允许的。但必须包起来。

现在我提供有关该问题的更多详细信息。基本上，我想要一个父组件，它能够获取数据并更改其子组件以在不同情况下呈现不同的视图。这是显示一个表格，子是表格的行。我想使用相同的数据来显示其他内容。 希望这可以清楚地表达问题。

Child = React.createClass({
  render(){
    return (
      <tr>
        <td> {this.props.name} </td>
        <td> {this.props.age} </td>
        <td> {this.props.address} </td>
      </tr>
    )
  }
});    

Father = React.createClass({
  fetchData(){
    ...
  },
  render(){
    //how to wrap here? <div> is not allowed
    {this.props.children}
  }
});

GrandFather = React.createClass({
  renderSomething(){
    return this.props.persons.map((p) => {
      return ( <Father> 
                 <Child>
               </Father>
      )
    });
  },
  render(){
    <div>
      <table>
        <thead>
          <tr>
            <th> Name </th>
            <th> Age  </th>
            <th> Address </th>
          </tr>
        </thead>
        <tbody>
          {this.renderSomething()}
        </tbody>
      </table>
    </div>
  }
});

最终更新

---

看起来没有办法将 a 包装在 React 组件中。我想可能有一些我不知道的 HTML 魔法。 最终我只是改变了代码结构。现在可以了。

Answer 1

我认为你的问题太理论化了，你应该提供一个更具体的例子。使用您当前的代码：

• Father 类实际上什么都不做，因此您可以直接删除它，您的代码就可以了。
• renderSomething() 恕我直言从未执行，假设 GrandFather.render() 作为入口点。

关于你的理论问题：

• 不，render() 必须返回一个元素，不多也不少。所以你不能有一个只返回元素数组的render()。

---

查看您更新的问题...

您可以将 <tbody> 从 GrandFather 移动到 Father 并将其用于包装。一个<table> 可以包含多个<tbody> 部分。