組件如何做其子項佈局？

我一直在玩React幾個星期，所以我遠離專家。這是一個問題：我正在構建一些佈局子項的組件。也就是說，Layout可以用作在：組件如何做其子項佈局？

var SomeComponent = React.createClass({ 
    render: function() { 
     return (
      <Layout> 
       <...child 1/> 
       <...child 2/> 
       ... 
      </Layout> 
     ); 
    } 
});

好，佈局沒有自己的孩子，所以就不能修改自己的道具。它不能克隆孩子，因爲他們可能包含refs。佈局是否可以將每個孩子包裝在（正確定位的）div中？具有ref的孩子是否會導致SomeComponent refs的正確更新？有沒有更好的方法來做到這一點？

我想了解更多關於親子溝通的一般問題，我比以前更困惑。該文件指出：

「對於親子溝通，只需傳遞道具。」

在本文檔中的相關部分，我們發現：

「在反應，所有者是設置其他部件的道具組成部分。」

那麼，什麼給？在我看來，只有店主，不是父母，可以設置道具。

這已在這裏討論了幾個帖子，但我找不到滿意的答案。一些答案表明克隆父母的孩子，但如果原來的所有者在其「ownees」中設置了ref道具，我們會遇到問題。在上面的示例中，SomeComponent擁有傳遞給Layout的組件作爲子組件。如果我在佈局中克隆子項（比如添加回調），佈局將成爲克隆的所有者，所以SomeComponent參考將不會獲取它們。

我完全困惑。

來源

2014-10-11 Eduardo

您能否提供更多的上下文？目前還不清楚你想在這裏做什麼。 – FakeRainBrigand 2014-10-11 20:01:26

簡而言之，我想將道具（回調）傳遞給我的孩子。不克隆它們，因爲這會破壞參考機制。 – Eduardo 2014-10-11 21:56:22

好的，但你的實際目標是什麼？你想解決什麼問題？當你做''時，你爲什麼不能通過回調作爲道具？ – FakeRainBrigand 2014-10-11 21:58:24

我並不完全確定你在問什麼，但有些東西像你的<Layout />這樣的包裝組件可以對孩子做。

你提到你想要將每個子組件包裝在一個div中。這裏有一個例子：

var Layout = React.createClass({ 
    render: function() { 
     var children = []; 
     if (this.props.children) { 
      for (var i=0; i < this.props.children.length; i++) { 
       var child = this.props.children[i]; 
       children.push(
        <div className="child-container"> 
         {child} 
        </div> 
       ); 
      } 
     } 

     return (
      <div className="layout-container"> 
       {children} 
      </div> 
     ); 
    } 
});

上面可以看到，你可以訪問的Layout孩子們在this.props.children這僅僅是子組件的數組。因此，通過使用上面的簡單for循環，或使用this.props.children.map，您可以包裝每個孩子，然而您喜歡並渲染它。

來源

2014-10-11 20:35:42

是的，這將工作，並不會打破裁判機制。但是，我無法將回撥傳遞給我的孩子。 – Eduardo 2014-10-11 21:55:27

this.props.children不是一個數組，它是一個不透明的數據結構，請參閱[React.Children]（http://facebook.github.io/react/docs/top-level-api.html#react.children ）;它有時是一個數組，但這是一個實現細節，不應該依賴 – FakeRainBrigand 2014-10-11 22:00:28

組件如何做其子項佈局？

回答

相關問題