如何在React.js中重用這個小塊代碼？

Question

我是一個總的反應福利局，但這裏是我的代碼有：凡「ExampleComponent」可以在多個地方使用

var ExampleComponent = React.createClass({ 
    getInitialState: function() { 
    return {close: false}; 
    }, 
    handleClick: function(event) { 
    this.setState({close: !this.state.close}); 
    }, 
}); 

    var ButtonThing = React.createClass({ 
    <ExampleComponent />, 
    render: function() { 
    <div> yo </div> 
    ); 
    } 
}); 

？我已經嘗試了上面的內容，直接放入「ExampleComponent」，但沒有運氣。或者我只是想解決這個問題？

Answer 1

反應中的代碼重用由一個叫做mixins的概念來促進。

react docs給出了一個簡明的例子。

對於你的情況

var exampleMixin = { 
    getInitialState: function() { 
    return {close: false}; 
    }, 
    handleClick: function(event) { 
    this.setState({close: !this.state.close}); 
    } 
} 
var ButtonThing = React.createClass({ 
    mixins: [exampleMixin], // Use the mixin 
    render: function() { 
    return (<div> yo </div>); 
    } 
}); 

Answer 2

當您使用React.createClass你可以嘗試使用mixins，這樣

var ComponentStateMixin = { 
    getInitialState: function() { 
    return { close: false }; 
    }, 

    handleClick: function(event) { 
    this.setState({ close: !this.state.close }); 
    } 
}; 

var ButtonThing = React.createClass({ 
    mixins: [ ComponentStateMixin ], 
    render: function() { 
    return <div> 
     <button onClick={ this.handleClick }>Close</button> 
     <p>{ 'ButtonThing state:: ' + this.state.close }</p> 
    </div>; 
    } 
}); 

var Modal = React.createClass({ 
    mixins: [ ComponentStateMixin ], 
    render: function() { 
    return <div> 
     <button onClick={ this.handleClick }>Close Modal</button> 
     <p>{ ' Modal state:: ' + this.state.close }</p> 
    </div>; 
    } 
}); 

Example