无法以打字稿格式为材料 ui ColorlibStepIcon 创建类组件

Question

我的目标是将 Stepper 创建为类组件，但我无法将 ColorlibStepIcon 功能组件添加到类组件中。

我试过了，但它显示了几个错误。

Here is the working sample

这种方式我试过了（我已经在上面的链接中注释了代码）：

class ColorlibStepIcon extends React.Component(StepIconProps, PState) {
  constructor(props: StepIconProps) {
    super(props);
    this.state = {
      icons: { 1: <SettingsIcon />, 2: <GroupAddIcon />, 3: <VideoLabelIcon /> }
    };
  }

  render() {
    const { active, completed } = this.props;
    const classes = this.useColorlibStepIconStyles();

    return (
      <div
        className={clsx(classes.root, {
          [classes.active]: active,
          [classes.completed]: completed
        })}
      >
        {icons[String(props.icon)]}
      </div>
    );
  }
}

还有一个查询，谁也可以提供 handleNext 方法的帮助吗？

 handleNext = () => {
     setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

谁能帮我制作类组件。我被困了好几天？

提前致谢！

Answer 1

首先你不应该在 state 的 prop 中使用 JSX。这不是一种反应方式，在我看来也不是很好的方法。 最好让它更容易。 例如，我正在使用功能组件和钩子，但您至少可以考虑一下。

看看吧。

立即渲染内部的组件（我更喜欢这个）

interface State {
    currentStep: number;
}

export class StepsSimpleClassComponent extends React.Component<StepIconProps, State> {
    private stepsCount = 1 // from zero;

    public state: State = {
        currentStep: 0
    }

    private handlePrev = () => {
        const result = this.state.currentStep - 1;

        this.setState({
            currentStep: result < 0 ? 0 : result
        })
    }

    private handleNext = () => {
        const result = this.state.currentStep + 1;

        this.setState({
            currentStep: result > this.stepsCount ? 1 : result
        })
    }

    render() {
        const { currentStep } = this.state;

        return (
            <>
                <Step0 active={currentStep >= 0} />
                <Step1 active={currentStep >= 1} />

                <button onClick={this.handlePrev}>Prev</button>
                <button onClick={this.handleNext}>Next</button>
            </>
        )
    }
}

相同但具有功能组件

export const StepsSimple: React.FC = () => {
    const stepsCount = 1 // from zero;
    const [currentStep, setCurrentStep] = React.useState(0);

    function handlePrev() {
        const result = currentStep - 1;

        setCurrentStep(result < 0 ? 0 : result);
    }

    function handleNext() {
        const result = currentStep + 1;

        setCurrentStep(result > stepsCount ? 1 : result);
    }

    return (
        <>
            <Step0 active={currentStep >= 0} />
            <Step1 active={currentStep >= 1} />

            <button onClick={handlePrev}>Prev</button>
            <button onClick={handleNext}>Next</button>
        </>
    )
}

使用和步骤数组

export const  StepsUsingMap: React.FC = () => {
    const [currentStep, setCurrentStep] = React.useState(0);

    const steps = [
        Step0,
        Step1
    ]

    const stepsCount = steps.length - 1 // from zero;

    function handlePrev() {
        const result = currentStep - 1;
        setCurrentStep(result < 0 ? 0 : result);
    }

    function handleNext() {
        const result = currentStep + 1;
        setCurrentStep(result > stepsCount ? 1 : result);
    }

    return (
        <>
            {steps.map((Step, index) => (
                <Step key={index} active={currentStep >= index} />
            ))}

            <button onClick={handlePrev}>Prev</button>
            <button onClick={handleNext}>Next</button>
        </>
    )
}

步骤组件示例

interface Props {
    active: boolean;
}

// Step example
const Step0: React.FC<Props> = ({ active = false }) => {
    return (
        <div className={clsx({ [classes.active]: active, })}>Step0</div>
    )
}

const Step1: React.FC<Props> = ({ active = false }) => {
    return (
        <div className={clsx({ [classes.active]: active, })}>Step1</div>
    )
}