React.js：在Recomp.render（）和React.createClass（）的渲染中傳遞子組件的區別？

我正在使用React.js處理一個項目，並對React的組成非常困惑。React.js：在Recomp.render（）和React.createClass（）的渲染中傳遞子組件的區別？

http://facebook.github.io/react/docs/multiple-components.html

上述鏈接給出了一個例子。它使用React.creatClass（）創建三個組件。父組件和兩個子組件。父組件在渲染方法中包含JSX中的其他組件。

這個例子很清楚，但不是很「可重用」。如果我想在另一種情況下通過另一個孩子呢？ React.js似乎缺乏像Backbone的觀點那樣的'擴展'方法。

後來，我發現你可以在React.render（）中傳遞子組件，並使用this.props.children來合成。

var Tom = React.createClass({ 
    render: function(){ 
     return(
      <a>This is Tom.</a> 
    ) 
    } 
    }); 

var John = React.createClass({ 
    render: function(){ 
     return(
      <a>This is John.</a> 
    ) 
    } 
}); 

var Outter = React.createClass({ 
componentDidMount:function(){ 
    console.log(this.props.children); 
}, 

render: function(){ 
    return(
     <div className="test"> 
     {this.props.children} 
     </div> 
) 
} 
}); 

React.render(<Outter><Tom /><John /></Outter>, document.getElementById('main'));

我認爲這很好，但這種方法和上面的例子真的有什麼不同？這種方法是在React.js中複合組件的正確方法嗎？

感謝

來源

2015-04-23 WalnutZ

不同的是，就像你說的，你可以通過你想爲組件的子項的任何組件。使用this.props.children的組件通常是用作樣式和行爲的包裝的組件，但組件的內容會因不同的使用情況而發生變化。就像彈出式窗口一樣，每個彈出窗口都需要相同的外觀和行爲（如關閉按鈕），但每個彈出窗口的彈出窗口內容都不相同。

不使用this.props.children的組件更像是黑盒子，它們知道應該如何渲染以及它們需要什麼子組件。但是你仍然可以通過傳遞其他道具使它們變得動態。

元件也可以作爲道具傳遞。組件只是JS對象，任何JS對象都可以作爲道具傳遞。但我認爲我從未見過這樣做的用例。如果你有一個包含兩個或更多特定「插槽」的包裝器組件，那麼它應該被渲染。喜歡的東西：

var Wrapper = require('./wrapper'); 
var Header = require('./title'); 
var Content = require('./content'); 
var Footer = require('./footer'); 

var MyComponent = React.createClass({ 
    render() { 
    return <Wrapper footer={Footer} header={Header} content={Content} />; 
    } 
});

來源

2015-04-23 07:12:07

謝謝你的答案安德斯。你是什麼意思，仍然通過傳遞其他道具讓他們變得動態？可以通過道具傳遞組件嗎？ – WalnutZ

@WalnutZ我已經通過一些澄清更新了我的帖子。 –

謝謝！現在這很清楚。對不起，我現在沒有足夠的聲望投票回答你的答案。 – WalnutZ

這取決於你的使用情況，採取的形式這兩個例子：

登錄表單 - 幾乎所有的登錄表單具有相同的結構，用戶名/電子郵件，密碼，一個讓我登錄的複選框和一個登錄按鈕;一個LoginForm組件不需要進一步自定義其結構，因此它適合於按照原樣使用
註冊表單 - 現在取決於上下文，您可以在註冊時向用戶提供更多或更少的字段，在這種情況下，您使用props.children

來源

2015-04-23 07:22:00 Cristik

很好的例子，謝謝！ – WalnutZ

React.js：在Recomp.render（）和React.createClass（）的渲染中傳遞子組件的區別？

回答

相關問題