如何有条件地将属性添加到语义 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道具。这就是您收到警告的原因。我的猜测是，您正在传递调光器和调光器调光器上的active={this.state.isLoading}。如果您在 Dimmer.Dimmable 上使用dimmed组件，我认为这将解决您的问题。