reactjs - React Material-ui library Error Received `true` for a non-boolean attribute `active` 。在使用 Stepper 组件时

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 active。截至目前，您正在传递一个 bool 值。所以你必须使用下面的代码

<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>