Как условно добавить атрибут к элементу Semantic UI React?

Question

Я использую Semantic UI React для базового интерфейса.

Я использую Dimmer модуль, который я хочу условно применить active атрибут, в зависимости от того, загружается ли страница в данный момент.

Загружается страница или нет, указывается переменной состояния. Кажется, что ниже работает, но выдает предупреждение, которое я хотел бы удалить.

<Dimmer active={this.state.isLoading} inverted>
  <Loader inverted></Loader>
</Dimmer>

isLoadingпеременная является логическим:

  constructor() {
    super();
    this.state = {
      isLoading: true,
      ...

Предупреждение консоли выглядит следующим образом:

warning.js:33 Warning: Received `true` for a non-boolean attribute `active`.

If you want to write it to the DOM, pass a string instead: active="true" or active={value.toString()}.
    in div (created by DimmerDimmable)
    in DimmerDimmable (at explore.js:110)
    in div (created by Container)
    in Container (at explore.js:102)
    in div (at Layout.js:7)
    in Unknown (at explore.js:101)
    in ExploreBounty (created by App)
    in Container (created by App)
    in App
    in ErrorBoundary

Изменение логического значенияtrueстрока приводит к следующему противоречивому предупреждению:

Warning: Failed prop type: Invalid prop `active` of type `string` supplied to `Dimmer`, expected `boolean`.
    in Dimmer (at explore.js:111)
    in ExploreBounty (created by App)
    in Container (created by App)
    in App
    in ErrorBoundary

Опять же, страница работает с логическим значением, но я хочу избавиться от предупреждения.Как мне это сделать?

Answer 1

Согласно вашей ошибке здесь, первая ошибка не приходит от вашего <Dimmer> компонент, это исходит от <Dimmer.Dimmable> составная часть.

На <Dimmer> active prop действительно логический, поэтому вы должны продолжать передавать его как логическое значение от состояния.

На <Dimmer.Dimmable> компонента, нет active двигательный Вот почему вы получаете предупреждение. Я думаю, что вы проходите active={this.state.isLoading} как на диммере, так и на диммере. Если вы используете dimmed компонент на диммер.димблируем я думаю что решит вашу проблему.