0

我在我的应用程序中使用 Ant Design (antd)，它有一个名为Modal的组件。这个 Modal 是按照 React 的标准流程呈现的，即在你的方法上声明一个<Modal/>组件。render()

如果您查看 Modal 文档，您会看到有一个Modal.method()也呈现组件，但不必在 上声明此组件render()，就像使用标准<Modal/>组件完成的那样。

我的问题是：如何实现我自己的自定义Modal.method()组件（例如Modal.login()），它有自己的逻辑、自己的状态、自己的渲染等，当用户通过单击确定完成使用组件时，它只在回调函数中返回一个值，或执行任何其他操作？该组件将像这样使用Modal.method()，即阻止其他组件的使用，直到它完成其流程并返回一个值。

这是 codepen.io 上的一个工作示例。我想了解如果组件不是在任何方法的任何位置声明Modal.confirm()的组件如何呈现的逻辑。<Component/>render()

4

2 回答 2

0

所以我相信你实际上是在问几个问题。

您提出的问题之一是关于renderProps模式。

这就是 antd（以及一般的许多反应库）以“反应”方式运行的方式，例如（这是 antd 的页脚组件）：

<Modal
          visible={visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          ***footer={[
            <Button key="back" onClick={this.handleCancel}>
              Return
            </Button>,
            <Button key="submit" type="primary" 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>

我在这个组件的 renderProps 部分添加了一些重点。

渲染道具允许您通过将所有内容存储到组件中来编写和思考一种对反应更友好的方式。

例如，对于您的自定义内容，您可以编写一些模态内容作为模态的通用容器，然后传入数据（例如从 redux/api 提供）并将其向下传递，它可能显示为：

<Modal

modalContent={ 
<div>
{content from redux/wherever}
</div>}

</Modal>

但是，作为一般规则，您必须返回渲染中的所有内容（在类或功能组件中）。

于 2019-12-01T16:09:12.313 回答
0

你可以通过使用 ReactDOM.render 来做到这一点，就像我们引导应用程序一样。

一个简单的例子

function ModalComponent() {
  return (
    <div className="modal-class">
      <div>content</div>
    </div>
  );
}

function showModal() {
  const div = document.createElement("div");
  document.body.appendChild(div);

  ReactDOM.render(<ModalComponent />, div);
}

// now somewhere in app call

showModal();
于 2019-12-01T18:11:59.563 回答