减少 React prop 值上 switch case 的重复代码，提高代码的可重用性

Question

这是多步形式，在程序中，将父级属性传递给 2 级子组件，我觉得在 switch case 上，按钮组件具有重复的道具。谁能帮我重写这段代码而不用复制下面的代码。我可以使用任何反应方法来防止这个问题吗？有没有人可以帮助我解决这个问题。因为我还是 React js 的初学者。

  onHandleBtnClick={onHandleBtnClick}
  nextStep={nextStep}
  nextProgress={nextProgress}
  cElement={cElement}

class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentElement: [
                {
                    progress: 10,
                    step: 1,
                    type: null
                }
            ],
        };
    }

    onHandleClick = nextselection =>{
//some logic goes here
    }

    render() {
        const {currentElement, userSignUp, handleSignUp, clientInfo} = this.state;
        return (
                 <div className="container-fluid">
                    <div className="row mx-0">
                        {currentElement.map(element => (
                            <Renderelement
                                key={element.step}
                                step={element.step}
                                progress={element.progress}
                                curElement={element}
                                clientObj={clientInfo}
                                onHandleBtnClick={this.onHandleClick}
                            />
                        ))}
                    </div>
                </div>
            </form>
        );
    }
}


function Renderelement(props) {
    const { step, progress, curElement, onHandleBtnClick, clientObj } = props;
    let { nextStep, nextProgress, cElement } = nextObject();

    if (step == 1) {
        switch (curElement.type) {
            case "individual":
                return (
                    <React.Fragment>
                        <div className="col-md-6 col-sm-12">
                            <Clientinformation />
                            <Button
                                onHandleBtnClick={onHandleBtnClick}
                                nextStep={nextStep}
                                nextProgress={nextProgress}
                                cElement={cElement}
                                profileType="individual"
                                btntext="Saving & Contiune"
                            />
                        </div>
                    </React.Fragment>
                );
            case "business":
                return (
                    <React.Fragment>
                        <div className="col-md-6 col-sm-12">
                            <Clientinformation />
                            <Button
                                onHandleBtnClick={onHandleBtnClick}
                                nextStep={nextStep}
                                nextProgress={nextProgress}
                                cElement={cElement}
                                profileType="business"
                                btntext="Saving & Contiune"
                            />
                        </div>
                    </React.Fragment>
                );
            default:
                break;
        }
    } else if (step == 2) {
        switch (curElement.type) {
            case "individual":
                return (
                    <React.Fragment>
                        <div className="col-md-6 col-sm-12">
                            <Caregiverinfo />
                            <Button
                                onHandleBtnClick={onHandleBtnClick}
                                nextStep={nextStep}
                                nextProgress={nextProgress}
                                cElement={cElement}
                                profileType="individual"
                                btntext="Saving & Contiune"
                            />
                        </div>
                    </React.Fragment>
                );
            case "business":
                return (
                    <React.Fragment>
                        <div className="col-md-6 col-sm-12">
                            <Caregiverinfo />
                            <Button
                                onHandleBtnClick={onHandleBtnClick}
                                nextStep={nextStep}
                                nextProgress={nextProgress}
                                cElement={cElement}
                                profileType="business"
                                btntext="Saving & Contiune"
                            />
                        </div>
                    </React.Fragment>
                );
            default:
                break;
        }
    } 

    function nextObject() {
        let nextStep = step;
        let nextProgress = progress;
        let cElement = curElement;
        nextStep = parseInt(nextStep) + 1;
        nextProgress = parseInt(nextProgress) + 10;
        return { nextStep, nextProgress, cElement };
    }
}

function Profilebutton(props) {
    return (
        <div className="col-md-4 offset-md-4 text-center">
            <div
                className="btn btn-primary btn-main btn-lg p-4 mb-4 profileType"
                onClick={() => props.onHandleBtnClick(props.nextProgress+"-"+props.nextStep+'-'+props.profileType)}
            >
                {props.btntext} <i className={"fa-2x fas " + props.btnicon}></i>
            </div>
        </div>
    );
}
class Caregiverinfo extends Component {
//Caregiver class
}
class Clientinformation extends Component {
//client class
}

Answer 1

React 中的道具是 Objects。所以你可以用你所有的常用道具创建一个对象。

const buttonProps = {
    onHandleBtnClick,
    cElement: curElement,
    nextStep: parseInt(step) + 1,
    nextProgress: parseInt(progress) + 10,
    btntext: 'Saving & Contiune',
    profileType: curElement.type,
  };

并且可以使用...运算符传播常用道具

<Button {...buttonProps} />

因为我们正在对 commonProps 对象中的 nextStep 和 nextProgress 进行更改。现在您可以删除 nextObject() 及其实现。

我们也可以删除 switch 语句和 if 。完整的重构代码将如下所示，

function Renderelement(props) {
  const {step, progress, curElement, onHandleBtnClick, clientObj} = props;

  const buttonProps = {
    onHandleBtnClick,
    cElement: curElement,
    nextStep: parseInt(step) + 1,
    nextProgress: parseInt(progress) + 10,
    btntext: 'Saving & Contiune',
    profileType: curElement.type,
  };

  return (
    <React.Fragment>
      <div className="col-md-6 col-sm-12">
        {step === 1 ? <Clientinformation /> : <Caregiverinfo />}
        <Button {...buttonProps} />
      </div>
    </React.Fragment>
  );
}

减少 React prop 值上 switch case 的重复代码，提高代码的可重用性

Reduce duplicate codes on switch case on React prop value improve code resuability

reactjs

dependency-properties