Reactjs 组件多态性

我有几个具有验证功能的相同表单。 我想创建另一个具有相同行为的表单，除了验证函数

我尝试使用mixin来实现这一点，但mixin不支持方法重写

解决这个问题的最佳方法是什么

这是问题的一个例子：

var FormMixin={
验证：函数（）{
如果（this.state.message！=''）{
this.setState（{status:'ok'}）；
}否则{
this.setState（{status:'error'}）；
}
},
getInitialState:函数（）{
返回{
消息：“Hello123！”，
状态：“”
};
},
handleChange:函数（newValue）{
这是我的国家({
消息：newValue
});
},
valueLink:function（）{
返回{
值：this.state.message，
requestChange:this.handleChange
}     
},
渲染：函数（）{
返回(
验证
{this.state.status}
);
}
}
var Form=React.createClass({
mixin:[FormMixin]
});
var FormEmpty=React.createClass({
/*验证：函数（）{//如何覆盖验证
this.setState（{status:'ok'}）；
},*/
mixin:[FormMixin]
});
var Hello=React.createClass({
render:function（）{
返回(
);
}
});
React.render（，document.getElementById（'container'）；

您可以创建一个以验证函数为参数的mixin工厂

function FormMixin(validate) {
    return {
        validate: validate,
        /* ... */
    };
}

var Form = React.createClass({
    mixins: [FormMixin(validateMessage)]
});

---

请注意，mixin不能覆盖

渲染

。您最好创建一个简单的

表单

组件，该组件接受

验证

属性并在其他表单组件中重用它。

混合可能不是最好的方法，而且它们不适合React 0.13+中提供的真正的JavaScript

类

模型

一种简单的替代方法是使用从

表单

到父组件的事件/回调，该父组件可以提供自定义验证（）。例如：

var Form = React.createClass({
    propTypes: {
        validationOverride: React.PropTypes.func
    },

    validate: function () {
        if (this.props.validationOverride) {
            this.setState({status: this.props.validationOverride() });
            return;
        } 
        if (this.state.message !== '') {
            this.setState({status: 'ok'});
        } else {
        this.setState({status: 'error'});
        }
    },
    getInitialState: function () {
        return {
            message: 'Hello123!',
            status: ''
        };
    },
    handleChange: function (newValue) {
        this.setState({
            message: newValue
        });
    },
    valueLink: function() {
        return {
          value: this.state.message,
          requestChange: this.handleChange
        }     
    },
    render: function () {
        return (
         <div>
           <input type = "text" valueLink = {this.valueLink()} />
           <button onClick={this.validate} >Validate</button>
           <div>{this.state.status}</div>
         </div>
        );
    }
});

var FormEmpty = React.createClass({
    validate: function() {
        // you could pass in values to this function
        return "NOT OK!";
    },
    render: function() {
        return <Form validationOverride={ this.validate } />;    
    }
});

var Form=React.createClass({
道具类型：{
validationOverride:React.PropTypes.func
},
验证：函数（）{
如果（此.props.validationOverride）{
this.setState（{状态：this.props.validationOverride（）}）；
返回；
} 
如果（this.state.message！=''）{
this.setState（{status:'ok'}）；
}否则{
this.setState（{status:'error'}）；
}
},
getInitialState:函数（）{
返回{
消息：“Hello123！”，
状态：“”
};
},
handleChange:函数（newValue）{
这是我的国家({
消息：newValue
});
},
valueLink:function（）{
返回{
值：this.state.message，
requestChange:this.handleChange
}     
},
渲染：函数（）{
返回(
验证
{this.state.status}
);
}
});
var FormEmpty=React.createClass({
验证：函数（）{
//您可以将值传递到此函数
返回“不正常！”；
},
render:function（）{
返回；
}
});

虽然我遗漏了一些细节（因为不清楚验证将如何进行），但您可以看到我如何创建了第二个名为

FormEmpty

的类，该类包含一个子类

Form

。它以回调的形式传递函数，称为

validationOverride

。

表单

在需要运行验证时调用该函数（如果已设置）。如果未设置，则应用标准验证逻辑

当然，您可以选择将其结构化，这样就有了一个从未进行过验证的基类，并且它总是需要传递一个验证函数。通过这种方式，您总是需要对父表单和基表单进行组合以执行验证（这是一种非常常见的反应模式）。

请查看

如果您使用的是简单的表单和验证，那么它非常方便

var Form = React.createClass({
    propTypes: {
        validationOverride: React.PropTypes.func
    },

    validate: function () {
        if (this.props.validationOverride) {
            this.setState({status: this.props.validationOverride() });
            return;
        } 
        if (this.state.message !== '') {
            this.setState({status: 'ok'});
        } else {
        this.setState({status: 'error'});
        }
    },
    getInitialState: function () {
        return {
            message: 'Hello123!',
            status: ''
        };
    },
    handleChange: function (newValue) {
        this.setState({
            message: newValue
        });
    },
    valueLink: function() {
        return {
          value: this.state.message,
          requestChange: this.handleChange
        }     
    },
    render: function () {
        return (
         <div>
           <input type = "text" valueLink = {this.valueLink()} />
           <button onClick={this.validate} >Validate</button>
           <div>{this.state.status}</div>
         </div>
        );
    }
});

var FormEmpty = React.createClass({
    validate: function() {
        // you could pass in values to this function
        return "NOT OK!";
    },
    render: function() {
        return <Form validationOverride={ this.validate } />;    
    }
});