Как повторно использовать этот небольшой блок кода в React.js?

Question

Я всего реагируют NEWB, но вот код у меня есть:

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» может быть использован в нескольких местах? Я пробовал то, что у меня выше, и просто вставлял «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