首页 文章

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

提问于
浏览 次
0

我在React中使用Modals时注意到的是，在渲染组件时，即使可见状态为 false ，也会执行Modal的主体 .

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

我只想在可见道具为 true 时才执行整个模态 . 有办法吗？

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

javascript reactjs

2 回答

  • 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>
        );
    }
    回复于
  • 0

    它不是关于Modal，而是关于呈现Modal的组件，为什么父组件重新呈现，console.log将始终执行 .

    回复于

相关问题