如何在React JS中创建可重用的表单

Question

我想通过传递来自组件的道具来动态显示表单。我该怎么办？

已编辑..

这是我的登录组件的代码，我正在使用动态表单组件来呈现表单：

import React, {Component} from 'react';
import DynamicForm from './DynamicForm';
class Login extends Component
{

constructor(props) {
    super();
    this.state = {
        name: '',
        email: '',
        password: ''
    }
}

onChangeHandler = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    })
}
onSubmitHandler = (e) => {
    e.preventDefault();
    const {fullname, email, password} = this.state;
    this.setState({name: fullname, email: email, password: password})
}
render() {
    let dynamicForm = [
        {
            name: 'fullname',
            type: 'text',
            label: 'Username'
        }, {
            name: 'email',
            type: 'email',
            label: 'Email'
        }, {
            name: 'password',
            type: 'password',
            label: 'Password'
        }
    ]
    return (
        <div className="col-md-12">
            <DynamicForm dynamicForm={dynamicForm}/>

        </div>
    );
}

}
export default Login;

这是动态表单组件：

import React from 'react';

const DynamicForm = (props) => {
    return (

    <form className='login'>
        {props
            .dynamicForm
            .map((formAttr, index) => {
                return (
                    <div key={index} className="col-md-3">
                        <label>
                            {formAttr.label}
                        </label>
                        <input type={formAttr.type} name={formAttr.name}/>
                    </div>
                )
            })}
    </form>

);
}
export default DynamicForm;