对于非布尔属性“ active”，React Material-ui库错误收到“ true”。在使用步进器组件时

Question

我最近尝试从material-ui v 0.x升级到material-ui v3.9.3，并且遇到了一个奇怪的步进器组件编译时错误

该代码在CodeSandbox中运行正常，但是相同的代码却给出了奇怪的错误（请参见屏幕截图）。但是我删除了代码的所有其他复杂性，并尝试放置简单的步进器，问题仍然相同

这是我的代码

<Stepper activeStep={stepIndex}>
   <Step
     active={true}
   >
      <StepButton
        icon={(<FavoriteIcon />)}
             onClick={() => {}}
      >
         <StepLabel>step1</StepLabel>
      </StepButton>
   </Step>
   <Step active={false}>
     <StepButton
       icon={(<FavoriteIcon />)}
             onClick={() => {}}
     >
        <StepLabel>step2</StepLabel>
          </StepButton>
     </Step>
     <Step>
       <StepButton
         icon={(<FavoriteIcon />)}
              onClick={() => {}}
       >
          <StepLabel>step3</StepLabel>
       </StepButton>
     </Step>
   </Stepper>

Answer 1

您将必须在代码中将true作为字符串传递给Stepper组件中活动的prop。截至目前，您正在传递布尔值。所以你必须使用下面的代码

<Stepper activeStep={stepIndex}>
   <Step
     active={"true"}
   >
      <StepButton
        icon={(<FavoriteIcon />)}
             onClick={() => {}}
      >
         <StepLabel>step1</StepLabel>
      </StepButton>
   </Step>
   <Step active={"false"}>
     <StepButton
       icon={(<FavoriteIcon />)}
             onClick={() => {}}
     >
        <StepLabel>step2</StepLabel>
          </StepButton>
     </Step>
     <Step>
       <StepButton
         icon={(<FavoriteIcon />)}
              onClick={() => {}}
       >
          <StepLabel>step3</StepLabel>
       </StepButton>
     </Step>
   </Stepper>