具有相同类型/值和不同类型的反应道具

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}

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

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]} />)
    };
}

具有相同类型/值和不同类型的反应道具

React Props with same type/ value and different types

state

reactjs

react-props