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

如何在React.js中重用这一小块代码？

2 个答案: