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

Question

我正在做一个反应项目，我想根据 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} />

如果你只想在某个条件下显示模态，你也可以使用三元运算符，在这种情况下我们不需要打开的 props：

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