Question

我正在使用语义UI React作为基本前端。

我正在使用<html> <head> <title>My Skype Web SDK app</title> <script src="https://swx.cdn.skype.com/shared/v/1.2.15/SkypeBootstrap.min.js"></script> </head> <body> <script> Skype.initialize({ apiKey: '<redacted>' }, api => { var app = new api.application; app.signInManager.signIn ({ username: '****.onmicrosoft.com', password: '****@' }).then(() => { console.log("signed in as", app.personsAndGroupsManager.mePerson.displayName()); }, err => { console.log("cannot sign in", err); }); }, err => { console.log("cannot load the sdk package", err); }); </script> </body> </html>模块，我希望有条件地将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

同样，页面使用布尔值，但是我想摆脱警告。我该怎么做？

Answer 1

根据这里的错误，第一个错误不是来自<Dimmer>组件，而是来自<Dimmer.Dimmable>组件。

在<Dimmer>上，active道具确实是布尔型的，因此您应该继续将其作为来自状态的布尔型传递。

在<Dimmer.Dimmable>组件上，没有active道具。这就是为什么您会收到警告。我的猜测是您同时在Dimmer和Dimmer.Dimmable上传递了active={this.state.isLoading}。如果您在Dimmer.Dimmable上使用dimmed组件，那么我认为这将解决您的问题。

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

1 个答案: