如何有条件地将属性添加到语义 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 道具确实是布尔值，因此您应该继续将其作为布尔值从状态传递到那里。

在 <Dimmer.Dimmable> 组件上，没有 active 道具。这就是你收到警告的原因。我的猜测是您的 Dimmer 和 Dimmer.Dimmable 都通过了 active={this.state.isLoading}。如果您在 Dimmer.Dimmable 上使用 dimmed 组件，我认为这将解决您的问题。

如何有条件地将属性添加到语义 UI React 元素？

How do I conditionally add an attribute to a Semantic UI React element?

semantic-ui

semantic-ui-react