我在React中使用Modals时注意到的是,在渲染组件时,即使可见状态为 false ,也会执行Modal的主体。
示例:
render() {
return (
<Modal
title="Basic Modal"
visible={false}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
{console.log('visible is false but content is being executed!')}
</Modal>
);
}
我想只在可见道具是 true 时执行整个模态。有办法吗?
我正在使用这个基本的模态组件:https://ant.design/components/modal/
答案 0 :(得分:1)
您可以将条件渲染与逻辑&&
运算符一起使用
您可以在Docs.中了解有关条件渲染的更多信息
例如:
render() {
return (
SomeCondition &&
<Modal
title="Basic Modal"
visible={true}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
{console.log('visible is false but content is being executed!')}
</Modal>
);
}
答案 1 :(得分:0)
它不是关于Modal的,它是关于呈现Modal的组件,为什么父组件重新呈现,console.log将始终执行。