React JS：避免在渲染组件时执行模态

Question

我在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时执行整个Modal。 有办法吗？

我正在使用此基本的模态组件： https : //ant.design/components/modal/

Answer 1

您可以将条件渲染与逻辑&&运算符一起使用。
您可以在文档中阅读更多有关条件渲染的信息。
例如：

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>
        );
    }

Answer 2

这与Modal无关，而与渲染Modal的组件有关，为什么父组件会重新渲染，console.log将始终执行。