[javascript] Facebook React에서 코드 재사용을 위해 믹스 인 대 구성 요소 사용

업데이트 :이 답변은 구식입니다. 가능하면 믹스 인을 멀리하십시오. 경고 했어!
Mixins는 죽었습니다. 긴 라이브 작곡

처음에는이를 위해 하위 구성 요소를 사용 FormWidget하고 InputWidget. 그러나 생성 된 inputs와 그 상태에 대한 더 나은 제어를 원했기 때문에이 접근 방식을 중간에 포기했습니다 .

가장 도움이 된 두 가지 기사 :

• React를 생각하면서 실제로 중첩 된 컴포넌트를 원하지 않는다는 것을 깨달았습니다.
• 재사용 가능한 구성 요소 에는 깔끔한 믹스 인 예제가 있습니다.

내가 두 (다른)이나 mixin을 쓸 필요가 있다고 밝혀졌다 : ValidationMixin와 FormMixin.
내가 그들을 분리 한 방법은 다음과 같습니다.

유효성 검사

유효성 검사 믹스 인은 상태의 일부 속성에서 유효성 검사기 함수를 실행하고 “오류가 발생한”속성을 state.errors배열 에 저장하는 편리한 메서드를 추가하여 해당 필드를 강조 표시 할 수 있습니다.

출처 ( 요점 )

define(function () {

  'use strict';

  var _ = require('underscore');

  var ValidationMixin = {
    getInitialState: function () {
      return {
        errors: []
      };
    },

    componentWillMount: function () {
      this.assertValidatorsDefined();
    },

    assertValidatorsDefined: function () {
      if (!this.validators) {
        throw new Error('ValidatorMixin requires this.validators to be defined on the component.');
      }

      _.each(_.keys(this.validators), function (key) {
        var validator = this.validators[key];

        if (!_.has(this.state, key)) {
          throw new Error('Key "' + key + '" is defined in this.validators but not present in initial state.');
        }

        if (!_.isFunction(validator)) {
          throw new Error('Validator for key "' + key + '" is not a function.');
        }
      }, this);
    },

    hasError: function (key) {
      return _.contains(this.state.errors, key);
    },

    resetError: function (key) {
      this.setState({
        'errors': _.without(this.state.errors, key)
      });
    },

    validate: function () {
      var errors = _.filter(_.keys(this.validators), function (key) {
        var validator = this.validators[key],
            value = this.state[key];

        return !validator(value);
      }, this);

      this.setState({
        'errors': errors
      });

      return _.isEmpty(errors);
    }
  };

  return ValidationMixin;

});

용법

ValidationMixin세 가지 방법이 있습니다 validate, hasError그리고 resetError.
다음 validators과 같이 클래스가 객체 를 정의 할 것으로 예상 합니다 propTypes.

var JoinWidget = React.createClass({
  mixins: [React.addons.LinkedStateMixin, ValidationMixin, FormMixin],

  validators: {
    email: Misc.isValidEmail,
    name: function (name) {
      return name.length > 0;
    }
  },

  // ...

});

사용자가 제출 버튼을 누르면을 호출 validate합니다. 에 대한 호출 validate은 각 유효성 검사기를 실행하고 유효성 this.state.errors검사에 실패한 속성의 키를 포함하는 배열로 채 웁니다 .

내 render방법 에서는 hasError필드에 대한 올바른 CSS 클래스를 생성 하는 데 사용 합니다. 사용자가 필드 안에 포커스를 resetError두면 다음 validate호출 까지 오류 강조 표시를 제거하도록 호출합니다.

renderInput: function (key, options) {
  var classSet = {
    'Form-control': true,
    'Form-control--error': this.hasError(key)
  };

  return (
    <input key={key}
           type={options.type}
           placeholder={options.placeholder}
           className={React.addons.classSet(classSet)}
           valueLink={this.linkState(key)}
           onFocus={_.partial(this.resetError, key)} />
  );
}

FormMixin

양식 믹스 인은 양식 상태 (편집 가능, 제출, 제출)를 처리합니다. 이를 사용하여 요청이 전송되는 동안 입력 및 버튼을 비활성화하고 전송시 해당 뷰를 업데이트 할 수 있습니다.

출처 ( 요점 )

define(function () {

  'use strict';

  var _ = require('underscore');

  var EDITABLE_STATE = 'editable',
      SUBMITTING_STATE = 'submitting',
      SUBMITTED_STATE = 'submitted';

  var FormMixin = {
    getInitialState: function () {
      return {
        formState: EDITABLE_STATE
      };
    },

    componentDidMount: function () {
      if (!_.isFunction(this.sendRequest)) {
        throw new Error('To use FormMixin, you must implement sendRequest.');
      }
    },

    getFormState: function () {
      return this.state.formState;
    },

    setFormState: function (formState) {
      this.setState({
        formState: formState
      });
    },

    getFormError: function () {
      return this.state.formError;
    },

    setFormError: function (formError) {
      this.setState({
        formError: formError
      });
    },

    isFormEditable: function () {
      return this.getFormState() === EDITABLE_STATE;
    },

    isFormSubmitting: function () {
      return this.getFormState() === SUBMITTING_STATE;
    },

    isFormSubmitted: function () {
      return this.getFormState() === SUBMITTED_STATE;
    },

    submitForm: function () {
      if (!this.isFormEditable()) {
        throw new Error('Form can only be submitted when in editable state.');
      }

      this.setFormState(SUBMITTING_STATE);
      this.setFormError(undefined);

      this.sendRequest()
        .bind(this)
        .then(function () {
          this.setFormState(SUBMITTED_STATE);
        })
        .catch(function (err) {
          this.setFormState(EDITABLE_STATE);
          this.setFormError(err);
        })
        .done();
    }
  };

  return FormMixin;

});

용법

컴포넌트가 sendRequestBluebird promise를 반환해야하는 하나의 메서드를 제공 할 것으로 예상합니다 . (Q 또는 다른 promise 라이브러리와 함께 작동하도록 수정하는 것은 간단합니다.)

이 같은 편리한 방법을 제공합니다 isFormEditable, isFormSubmitting하고 isFormSubmitted. 또한 요청을 시작하는 방법을 제공합니다 submitForm.. 폼 버튼의 onClick핸들러 에서 호출 할 수 있습니다 .

답변

var 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')} />;
  }
});