React JS:可重用组件

我已经用类似的结构创建了表单验证

var Signin = React.createClass({
    render: function() {
        return (
                <Form>
                    <Input type="text" name="email" labelName="Email" rules="isEmail" error:"Email not valid" />
                    <Input type="password" name="password" labelName="Password" rules="isLength:6" error:"Passowrd not valid"/>
                </Form>
        );
    }
});

例如，因为"电子邮件"输入将在应用程序的不同部分使用，我会避免每次添加相同的属性（名称、类型、labelName、规则和错误）。所以我会创建这样的

var InputEmail = React.createClass({
    render: function () {
        return (
            <Input type="text" name="email" labelName="Email" rules="isEmail" error="Email not valid"/>
        )
    }
});
var InputPassword = React.createClass({
    render: function () {
        return (
            <Input type="password" name="password" labelName="Password" rules="isLength:6" error="Passwordnot valid"/>
        )
    }
});

所以登录组件应该是

var Signin = React.createClass({
    render: function() {
        return (
                <Form>
                    <InputEmail />
                    <InputPassword />
                </Form>
        );
    }
});

但是这样，我得到了两个错误：

1. 我在表单中找不到Input的props.name，因为InputEmail中没有；

2. 在Input的呈现函数中，状态为空

如何创建可重用/继承的组件？我使用合成模式和混合都失败了

我添加了我的完整代码：Form

var Form = React.createClass({
    getInitialState: function () {
        return {
            isValid : false,
            isSubmitting: false
        }
    },
    componentWillMount: function(){
        this.model = {};
        this.inputs = {};
        this.registerInputs(this.props.children);
    },
    registerInputs: function(children){

        React.Children.forEach(children, function (child) {

            if (child.props.name) {

                child.props.attachToForm = this.attachToForm;
                child.props.detachFromForm = this.detachFromForm;
                child.props.validate = this.validate;
            }
            if (child.props.children) {
                this.registerInputs(child.props.children);
            }
        }.bind(this));
    },

    attachToForm: function (component) {
        this.inputs[component.props.name] = component;
        this.model[component.props.name] = component.state.value;
        this.validate(component);
    },
    detachFromForm: function (component) {
        delete this.inputs[component.props.name];
        delete this.model[component.props.name];
    },
    validate: function (component) {
        var isValid = true;
                // validation code
        component.setState({
            isValid: isValid,
        }, this.validateForm);
    },

    validateForm: function () {
        var formIsValid = true;
        var inputs = this.inputs;
        Object.keys(inputs).forEach(function (name) {
            if (!inputs[name].state.isValid) {
                formIsValid = false;
            }
        });
        this.setState({
            isValid: formIsValid
        });
    },
    updateModel: function (component) {
        Object.keys(this.inputs).forEach(function (name) {
            this.model[name] = this.inputs[name].state.value;
        }.bind(this));
    },
    submit: function (event) {
        event.preventDefault();
        this.setState({
            isSubmitting : true
        });
        this.updateModel();
        console.log(this.model);
    },
    render: function () {
        return (
            <form className="ui form" onSubmit={this.submit}>
                {this.props.children}
                <button className="ui button" type="submit" disabled={this.state.isSubmitting}>Accedi</button>
            </form>
        );
    }
});

输入

var Input = React.createClass({
    getInitialState: function(){
        return {
            value : this.props.value || "",
            isValid: true
        }
    },
    setValue: function (event) {
        this.setState({
            value: event.target.value
        }, function () {
            this.props.validate(this);
        }.bind(this));
    },
    componentWillMount: function () {
        if (this.props.required) {
            this.props.validations = this.props.validations ? this.props.validations + ',' : '';
            this.props.validations += 'isLength:1';
        }
                // ERROR: TypeError: this.props.attachToForm is not a function
        this.props.attachToForm(this);
    },
    componentWillUnmount: function () {
        this.props.detachFromForm(this);
    },

    render: function () {
        var className = "field";
        if(this.props.className){
            className +=  " " + this.props.className;
        }
        if(this.props.required){
            className += " required";
        }
        var Label;
        if(this.props.labelName){
            Label = (<label htmlFor={this.props.name}>{this.props.labelName}</label>);
        }
        var Error;
        if(!this.state.isValid){
            Error = (<div className="ui">{this.props.error || this.props.name + " not valid"}</div>);
        };

        return (
            <div className={className}>
                {Label}
                <input type={this.props.type || "text"} id={this.props.name} name={this.props.name} onChange={this.setValue} value={this.state.value} />
                {Error}
            </div>
        );
    }
});

有了这个作品

ReactDOM.render(
    <Form>
        <Input type="text" name="email" labelName="Email" rules="isEmail" error:"Email not valid"/>
    </Form>,
    document.getElementById('app')
);

通过这种方式，我得到："TypeError:this.props.attachToForm不是函数this.props.attachToForm（this）；"

ReactDOM.render(
    <Form>
        <InputEmail/>
    </Form>,
    document.getElementById('app')
);

p.S：我试图在jsfiddle上添加此代码，但我得到了"！TypeError:无法定义属性"attachToForm"：对象不可扩展"

jsfiddle