具有相同类型/值和不同类型的 React Props

Question

我有一个通过 Material-ui 创建的以下文本文件。

 <TextField
                  error = {this.props.projectNameErrorStatus}
                  required = {this.props.projectNameRequiredStatus}
                  className={classes.textField}
                  margin="normal"
                  id="projectName"
                  name="projectName"

                />

但是，我有 4 个不同的 TextField，我将为它们设置错误道具，它们具有不同的名称，它们采用父容器的状态。这个问题将迫使我拥有 8 个不同的道具和州名。这将使我的代码更大且可读性更低。 例如我必须启动状态：

state = {
projectNameErrorStatus :true,
NameErrorStatus :true,
FamilyErrorStatus :true,
EmailErrorStatus :true,
projectNameRequiredStatus: true,
NameRequiredStatus: true,
FamilyRequiredStatus: true,
EmailRequiredStatus: true,

}

state = {this.state}

然后将它们作为道具传递给子组件。之后我应该将它们都用作道具。

let {

state = {
projectNameErrorStatus,
NameErrorStatus,
FamilyErrorStatus,
EmailErrorStatus,
projectNameRequiredStatus,
NameRequiredStatus,
FamilyRequiredStatus,
EmailRequiredStatus

} = this.props.state

我能否以更清洁、更高效的方式拥有这些道具和状态？

Answer 1

将其拆分为两个组件并使用 json 对象：

    import React from 'react';


class customTextfield extends Component {

    render() {
        return (
            <TextField
                error={this.props.ErrorStatus}
                required={this.props.RequiredStatus}
                className={classes.textField}
                margin="normal"
                id={this.props.Name}
                name={this.props.Name} 
                label={this.props.Label} />
        );
    }

}

class parentContainer extends Component {

    constructor(props) {
        super(props);

        this.state = {
            ErrorStatus = {
                Name: true,
                Email: false,
                Project: false,
                Family: false
            },
            RequiredStatus = {
                Name: true,
                Email: true,
                Project: true,
                Family: false
            },
            listOfTextFields =["Name", "Email", "Project", "Family"]
        }
    }

    render() {
        return this.state.listOfTextFields.map(field => <customTextfield Name={field} Label={field} ErrorStatus={this.state.ErrorStatus[field]} RequiredStatus={this.state.RequiredStatus[field]} />)
    };
}