如何在 React 中渲染组件而不将其放入 render() 方法中？答案

【问题标题】：How to render a component in React without putting it in a render() method?如何在 React 中渲染组件而不将其放入 render() 方法中？
【发布时间】：2020-03-26 08:43:45
【问题描述】：

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

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

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

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

【问题讨论】：

如果那是一个外部库，你可以检查查看一些东西，它总是写在渲染方法中。在节点模块中检查该库

标签： reactjs ant-design-pro

【解决方案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/an api 提供）并将其向下传递，它可能显示为：

<Modal

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

</Modal>

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

【讨论】：

【解决方案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();

【讨论】：