在 FacebookReact 中使用 Mixins 与组件进行代码重用

小开

最佳答案

更新: 这个答案已经过时了。如果可以的话，请远离 Mixin。我警告过你！
混合物已死，成分万岁

首先，我尝试使用子组件来提取 FormWidget和 InputWidget。然而，我中途放弃了这种方法，因为我想对生成的 input及其状态进行更好的控制。

对我帮助最大的两篇文章:

在 React 中思考让我意识到我实际上并不需要嵌套的组件;
可重用组件有一个简洁的混合例子。

It turned out to that I only needed to write two (different) mixins: ValidationMixin and FormMixin.
Here's how I separated them.

验证 Mixin

验证 Mixin 添加了一些方便的方法，可以在状态的某些属性上运行验证器函数，并将“ error’d”属性存储在 state.errors数组中，这样就可以突出显示相应的字段。

资料来源(gist)

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

表格 Mixin

表单混合处理表单状态(可编辑、提交、提交)。您可以使用它在发送请求时禁用输入和按钮，并在发送请求时相应地更新视图。

资料来源(大意)

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;


});

用法

It expects component to provide one method: sendRequest, which should return a Bluebird promise. (It's trivial to modify it to work with Q or other promise library.)

它提供了方便的方法，如 isFormEditable，isFormSubmitting和 isFormSubmitted。它还提供了一个启动请求的方法: submitForm。您可以从表单按钮的 onClick处理程序调用它。