React JS:避免在渲染组件时执行Modal

时间:2017-08-12 18:27:07

标签: javascript reactjs

我在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/

2 个答案:

答案 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将始终执行。