请使用高阶组件而不是Mixin

优质
小牛编辑
140浏览
2023-12-01

简单的例子

// 使用mixinvar WithLink = React.createClass({  mixins: [React.addons.LinkedStateMixin],  getInitialState: function () {    return {message: 'Hello!'};  },  render: function () {    return <input type="text" valueLink={this.linkState('message')}/>;  }});// 使用高阶组件的做法var WithLink = React.createClass({  getInitialState: function () {    return {message: 'Hello!'};  },  render: function () {    return <input type="text" valueLink={LinkState(this,'message')}/>;  }});

更加详细的例子

// 使用Mixin Mixinvar CarDataMixin = {  componentDidMount: {    // fetch car data and    // call this.setState({carData: fetchedData}),    // once data has been (asynchronously) fetched  }};var FirstView = React.createClass({  mixins: [CarDataMixin],  render: function () {    return (      <div>        <AvgSellingPricesByYear country="US" dataset={this.state.carData}/>        <AvgSellingPricesByYear country="UK" dataset={this.state.carData}/>        <AvgSellingPricesByYear country="FI" dataset={this.state.carData}/>      </div>    )  }});// 使用高阶组件var bindToCarData = function (Component) {  return React.createClass({    componentDidMount: {      // fetch car data and      // call this.setState({carData: fetchedData}),      // once data has been (asynchronously) fetched    },    render: function () {      return <Component carData={ this.state.carData }/>    }  });};// 将你的组件使用高阶组件包裹起来var FirstView = bindToCarData(React.createClass({  render: function () {    return (      <div>        <AvgSellingPricesByYear country="US" dataset={this.props.carData}/>        <AvgSellingPricesByYear country="UK" dataset={this.props.carData}/>        <AvgSellingPricesByYear country="FI" dataset={this.props.carData}/>      </div>    )  }}));

参考资料: