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

Question

What I've noticed when using Modals in React is when the component is rendered, the body of the Modal is executed even if the visible state is false .

Example:

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

I want to execute the entire Modal only if the visible prop is true . Is there a way to do it?

I'm using this basic Modal Component: https://ant.design/components/modal/

Answer 1

You can use conditional rendering with the logical && Operator.
You can read more about conditional renders in the Docs.
For example:

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