根据React中的条件显示/隐藏Bootstrap模式

Question

我正在处理React项目，我想根据api调用响应来切换引导程序模式。 data-dismiss="modal"正在处理按钮，但是我需要根据条件显示/隐藏。

例如：

if(x=10){
  //show the modal
}
else{
 //hide the modal
}

请提出任何建议！

Answer 1

这里没有足够的细节来正确，直接地回答您的问题。您的实际代码在哪里？您将需要提供多于一个空的if / else语句，以获取帮助。

话虽如此，如果您要在React中进行API调用，我是否可以假设您正在使用Axios？让响应在您的状态下激活一个布尔值，成功响应到达后应会根据需要隐藏或显示该值。

同样，很难知道上下文，或者这是一个成功的答案，没有上下文可以使用。希望对您有所帮助。

Answer 2

我基本上使用jquery在React中显示或隐藏引导程序模式。

下面是根据需要处理模态的方法。这里myModal是模态父div的ID

 if(x=10){
    //show the modal
    $('#myModal').modal('show');
  }
  else{
      //hide the modal
      $('#myModal').modal('hide');
  }

Answer 3

您可以将模式作为单独的组件。

function myModal(props) {
  return(
    <div>
      <Modal isOpen={props.open}>
        // ModalHead, ModalBody, etc
      </Modal>
    </div>
  };
}

然后在父组件的render()方法中，将显示/隐藏信息传递给模式组件：

let show = x === 10;
<myModal open={show} />

如果只想在特定条件下显示模态，则也可以使用三元运算符，在这种情况下，我们不需要 open 道具：

{x === 10 ? <myModal /> : ""}