Skip to content

Latest commit

 

History

History
87 lines (76 loc) · 2.65 KB

03.mixins.md

File metadata and controls

87 lines (76 loc) · 2.65 KB
Raw

Mixins보다 고차 구성 요소 사용[Use Higher order components over Mixins]

간단한 예제

// With Mixin
var WithLink = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function () {
    return { message: "Hello!" };
  },
  render: function () {
    return <input type="text" valueLink={this.linkState("message")} />;
  },
});

// 논리(logic)를 HOC로 이동
var WithLink = React.createClass({
  getInitialState: function () {
    return { message: "Hello!" };
  },
  render: function () {
    return <input type="text" valueLink={LinkState(this, "message")} />;
  },
});

자세한 예제

// With Mixin
var CarDataMixin = {
  componentDidMount: {
    // 자동차 데이터를 가져오고 데이터를 (비동기적으로) 가져오면
    // this.setState ({carData : fetched Data})를 호출합니다.
  },
};

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>
    );
  },
});

// With HOC
var bindToCarData = function (Component) {
  return React.createClass({
    componentDidMount: {
      // 자동차 데이터를 가져오고 데이터를 (비동기적으로) 가져오면
      // this.setState ({carData : fetched Data})를 호출합니다.
    },

    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>
      );
    },
  })
);

Related links: