Question

我需要使用bootstrap-4-react在模态中添加条件，但是模态总是出现而没有考虑所使用的条件。我现在将显示我的状态：

import Boostrap, { Modal } from 'bootstrap-4-react';
.
.
.
class Home extends Component {
.
.
.
componentDidMount() {
    Boostrap.modal("#signupModal", 'toggle')
  }
.
.
.
    render() {
      return (
         <div className="Home">
          <Modal show={achieveDreams && achieveDreams.length === 0} id="signupModal" fade>
            <Modal.Dialog>
              <Modal.Content>
                <Modal.Header>
                  <Modal.Title>
                <strong style={{ color: "#fff" }}>{"¡congratulation!".toUpperCase()}</strong>
                  </Modal.Title>
                  <Modal.Close>
                    <span aria-hidden="true">&times;</span>
                  </Modal.Close>
                </Modal.Header>
                <Modal.Body style={{ color: "#fff" }}>
                  Activate button.
                </Modal.Body>
              </Modal.Content>
            </Modal.Dialog>
          </Modal>
        </div>
      );
    }
  }

此刻，当我运行此开发程序时，下一步是在控制台中引发错误：

当前条件无法正常运行。如果有人知道如何以正确的方式调节模式，我将不胜感激。

Answer 1

如警告所示，您应该这样做，

show={achieveDreams && achieveDreams.length === 0 ? true : false}

注意：：我怀疑这种情况achieveDreams && achieveDreams.length === 0。

此条件是什么，如果achieveDreams（具有值/不为空）且achieveDreams.length === 0 。

因此，我认为此条件始终为false，您的条件应为

show={achieveDreams && achieveDreams.length !== 0 ? true : false}

更新

从docs

在您使用时，我没有看到任何用例，从文档中我们可以看到您只有2个使用模式的选项。

通过数据属性，

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
通过JavaScript，

Bootstrap.modal('#myModal', options);

因此，您尝试在模式上使用show道具的尝试在此处无效。 在模式上使用show道具对您的模式没有影响，您应该将其删除。

由于Bootstrap.modal('#myModal', options);中的componentDidMount，您的模态正在显示。

您应该在componentDidMount中有条件，

componentDidMount() {
  //considering `achieveDreams` is in state only, 
  //if `achieveDreams` is coming from `props` you should use `this.props.achieveDreams && this.props.achieveDreams.length !== 0`
  if(this.state.achieveDreams && this.state.achieveDreams.length !== 0){ 
     Boostrap.modal("#signupModal", 'toggle')
  }   
}

更新2

根据注释“ achieveDreams false”“ achieveDreams.lenth 0”当上述条件为true时，必须出现模态。

您的条件必须是这样，

componentDidMount() {
  //considering `achieveDreams` is in state only, 
  //if `achieveDreams` is coming from `props` you should use `this.props.achieveDreams && this.props.achieveDreams.length === 0`
  if(this.state.achieveDreams && this.state.achieveDreams.length === 0){ 
     Boostrap.modal("#signupModal", 'toggle')
  }   
}

Demo

Answer 2

据我所知，AchieveDreams尚未定义，请尝试使用this.state.achieveDreams && this.state.achieveDreams.length === 0，它将正常工作。

作为参考，您可以查看以下沙箱： https://codesandbox.io/s/mystifying-bash-6e2wq

注意：您正在将模态安装在componentDidMount中，因此它将始终出现，显示条件将无法按预期工作，您还必须在componentDidMount中添加条件，如下所示：

if (this.state.achieveDreams && this.state.achieveDreams.length === 0) {
    Boostrap.modal("#signupModal", "toggle");
}

如何使用bootstrap-4-react在模态中添加条件？

2 个答案: