Question

我在我的应用程序中使用Ant Design（antd），它具有一个名为Modal的组件。遵循React的标准流程，即在<Modal/>方法上声明一个render()组件，来呈现此模式。

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

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

这是codepen.io上Modal.confirm()中的working example。我想了解如果不在任何<Component/>方法的任何地方声明了render()的组件如何呈现的逻辑。

Answer 1

所以我相信您实际上是在问几个包裹在一起的问题。

您似乎要问的一个问题是关于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>

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

Answer 2

您可以通过使用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();

如何在React中渲染组件而不将其放入render（）方法中？

2 个答案: