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. 我无法在Form中找到Input的props.name，因为InputEmail中没有。

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

如何创建可重用/继承的组件？我无法同时使用合成模式和mixins

我添加了完整的代码：表格

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')
);

PS：我试图在jsfiddle上添加此代码，但得到“！TypeError：无法定义属性“ attachToForm”：对象不可扩展”

jsfiddle