Reactjs 如何包装桌子'；她像个孩子一样做出反应

如何在父组件中包装{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>
  }
});

Child=React.createClass({
render（）{
返回(
{this.props.name}
{this.props.age}
{this.props.address}
)
}
});    
父=React.createClass({
fetchData（）{
...
},
render（）{
//这里怎么包装？是不允许的
{this.props.children}
}
});
祖父=React.createClass({
renderSomething（）{
返回此.props.persons.map（（p）=>{
报税表（
)
});
},
render（）{
名称
年龄
地址
{this.renderSomething（）}
}
});

最后更新

---

看起来没有办法在React组件中封装。我想可能有一些我不知道的HTML魔法。

---

最终我只是改变了代码结构。现在可以了。

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

• 父类实际上什么都不做，所以您可以直接删除它，您的代码就可以了

• renderSomething（）

  是从未执行过的，假设将

  grander.render（）

  作为入口点

关于你的理论问题：

• 不，

  render（）

  必须返回一个元素，不多也不少。因此，不能使用只返回元素数组的

  render（）

---

看看你最新的问题

---

您可以将

从

祖父

移动到

父亲

，并将其用于包装。一个

可以包含多个

部分。

目前，您只返回一个空div，这样就不会有任何问题。你会想移动一些其他东西，但是

---

您看到的答案是否与将父div作为表标记一样简单？

我添加了更多代码来澄清这个问题。这实际上归结为如何包装表的行元素。但是通过这种方式，单元格看起来不同。这似乎是与表样式相关的不同问题。抱歉，我没有说清楚。现在我编辑了问题并添加了更多代码。我希望父组件作为一个数据源组件，这样它可以改变它的子组件以显示不同的视图。如果可能的话，我会尝试取消父组件，因为它可能会增加不必要的复杂性。何时以及如何尝试调用Fetchdata（）？您是否可以直接在子组件中调用它，然后在renderSomething中只返回子组件（这将是一个有效的jsx返回对象）？