Ошибка библиотеки React Material-ui Получено значение `true` для небулевого атрибута` active`.при использовании компонента Stepper - PullRequest
Новая
       6

Ошибка библиотеки React Material-ui Получено значение `true` для небулевого атрибута` active`.при использовании компонента Stepper

1 голос
/ 16 мая 2019

Я недавно пытался обновить с material-ui v 0.x до material-ui v3.9.3 и столкнулся со странной ошибкой времени компиляции для Stepper Component

Код прекрасно работает в 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>

enter image description here

1 Ответ

0 голосов
/ 16 мая 2019

Вы должны будете передать true в виде строки в вашем коде для проп, активной в компоненте Stepper. на данный момент вы передаете логическое значение. Поэтому вы должны использовать код ниже 

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