如何在React中包裝表格的tr作爲孩子

如何在父組件中包裝{this.props.children}？如何在React中包裝表格的tr作爲孩子

Obviousely，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> 
    } 
});

最後更新

貌似也沒辦法裹在一個陣營的組成部分。我以爲可能有一些我不知道的HTML魔法。最終我只是改變了代碼結構。它現在有效。

來源

2015-11-05 Russj

我覺得你的問題太理論了，你應該提供一個更具體的例子。使用您當前的代碼：

Father類實際上什麼也沒有，所以你可以放下它，你的代碼就會好。
renderSomething()是恕我直言從未執行，假設GrandFather.render()作爲入口點。

關於你的理論問題：

沒有，render()必須返回一個元素，沒有更多，不會少。所以你不能有一個render()只返回元素數組。

看你更新的問題...

您可以從GrandFather移動<tbody>到Father和使用的包裝。 A <table>可以包含多個<tbody>部分。

來源

2015-11-05 20:38:39

我已經添加了更多代碼來澄清問題。它真的歸結爲如何包裝表格的行元素。 – Russj

通過回答更新。 –

但是通過這種方式，單元看起來不同。 – Russj

現在你只是返回一個空的div，所以你不會有任何問題。你會希望移動其他一些事情，但...

就是你要找具有父DIV是表的標籤，簡單的答案是什麼？

來源

2015-11-06 04:59:03 bplittle

對不起，我沒有說清楚。現在我編輯了問題並添加了更多代碼。我想父組件作爲數據源組件，因此它可以改變它的子來顯示不同的看法。 – Russj

我會嘗試做掉與父成分，如果可能的話，因爲它增加了什麼可能是複雜的不必要的水平。何時以及如何調用Fetchdata（）？你能直接在子組件調用它，然後在renderSomething只返回子組件（這將是一個有效的JSX返回對象）？ – bplittle

如何在React中包裝表格的tr作爲孩子

回答

相關問題