將組件注入另一個組件

將組件注入其他組件的首選方法是什麼？我有一個面向對象的應用程序結構，其中一個View只知道它的父視圖。因爲我所有的組件都是「動態」組件，所以事先不知道組件結構。將組件注入另一個組件

我嘗試了兩種不同的方法用下面的共享代碼：

/** @jsx React.DOM */ 
var component = React.createClass({ 
    render: function() { 
     return (
      <div> 
       .. many elements here .. 
       {this.props.children} 
      </div> 
     ); 
    } 
}); 
var subcomponent = React.createClass({ 
    render: function() { 
     return (
      <div>test</div> 
     ); 
    } 
}); 

var parentView = React.renderComponent(
    <component>.. subelements</component>, 
    document.getElementById('reactContainer') 
);

1.多個部件呈現

var subView = React.renderComponent(
    <subcomponent />, 
    parentView.getDOMNode() 
);

這種方法的問題是，超組件內HTML是被注入的組件所取代。其他錯誤也出現了。看起來像這不是React這樣做的方式。

2.通過setProp進樣子組件與單個renderComponent

另一種方法是設置兒童支撐。

parentView.setProps({ 
    children: <subcomponent /> 
});

這種工作方式與預期的幾乎一樣，但也有一些缺點。它將兒童重置爲僅注入組件。我可以解決此問題：

parentView.setProps({ 
    children: [parentView.props.children, <subcomponent />] 
});

但是現在childView正在管理其父項的子項。但是我可以將它解壓到parentView上的一個方法。

另一個缺點是，當視圖深度比2更深時，對React組件的引用已消失，因爲只有rootView通過React.renderComponent呈現，因此我只能在rootview上執行setProps。

我想我需要一個React.renderComponent爲每個視圖，但我不知道如何將其注入父級的方式。

來源

2014-10-16 Willem de Wit

我不能完全理解你的模型，但似乎你正在與做事的慣用反應方式作鬥爭。你應該重新閱讀文檔並重新開始:( 你不需要注入兒童，他們絕對不應該作爲道具傳遞。如何處理兒童在這裏解決：http：//facebook.github.io /react/docs/multiple-components.html – edoloughlin 2014-10-16 21:32:27

我也非常困惑，你想在這裏做什麼。爲了有一個父組件內的子組件，你只需在父母的'render'函數內調用子組件。爲什麼你想通過道具插入一個孩子是完全超越我的，絕對不是你通常應該試圖用React做的事情。 – 2014-10-16 22:06:15

在大多數情況下，通過一個組件到另一個組件的首選方法是使用特殊的孩子道具（如你在你的例子顯示）：

var component = React.createClass({ 
    render: function() { 
     return (
      <div> 
       .. many elements here .. 
       {this.props.children} 
      </div> 
     ); 
    } 
});

你可以閱讀更多here

來源

2016-11-13 02:00:44 jacoballenwood

將組件注入另一個組件

回答

相關問題