javascript - ant design 模式打开时闪烁

Question

我在我的 React 应用程序中使用 antd design。我注意到 antd design 模态在打开时闪烁。

有办法解决这个问题吗？

我正在按照 https://ant.design/components/modal/ 的指示进行操作

我没有这方面的代码笔，但我已经按照以下方式编写了所有模态，并且我正在使用 antd design 的 css。

          <Modal
          visible={visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
            <Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
              Submit
            </Button>,
          ]}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>

Answer 1

从来没有发生在我身上。您是否在开发人员工具中检查了可能导致此问题的任何 CSS？ 例如，当我使用模态时，我的背景变暗。当我检查 ant 的一个默认类(根本不需要。它是一个包装器 div，包装了实际的模态 div)时，它有深色背景，因此发生了这种情况。因此，通过设置背景:透明；我可以解决这个问题。但后来我发现了这个:

mask = {false}

这将进入您的模态声明。像这样的事情:

         <Modal
          visible={visible}
          mask = {false}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
            <Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
              Submit
            </Button>,
          ]}
        >

所以，尝试一下吧。这可能会解决您的问题。