如何以编程方式在 React 18 中渲染组件

Question

我做了一个函数，它以编程方式为 React 17 创建模态，你只需要调用一个函数来创建一个新的模态。

它在之前工作得很好ReactDOM.render已弃用。

有没有办法代替React 18 中的渲染函数和其他东西？现在的创建根函数仅针对根组件，我想在指定的 DOM 元素中渲染简单的组件。

它是这样工作的：

应用程序.jsx

<button onClick={() => createModal(<h1>I'm a component inside a modal</h1>)}>Open Modal</button>

它处理它自己的状态，如果你想在几秒钟内制作一堆模态，这非常有用。

这是代码：

索引.js=> 这是容器。

import React from 'react'
import ReactDOM from 'react-dom'
import './index.scss'
import App from './App.jsx'

ReactDOM.render(
  <React.StrictMode>
    <div id="modal-container"></div> <- This is the container
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

模态/Modal.jsx=> 模态组件。

import { useState } from 'react'
import './Modal.scss'

const Modal = ({ content }) => {
    const [isOpen, setIsOpen] = useState(true)

    if (isOpen) {
        return (<>
            <div className="modal-background" onClick={() => setIsOpen(false)} />

            <div className="modal-content" >
                {content}
            </div>

            <button onClick={() => setIsOpen(false)} className="close-button" >Close</button>
        </>)
    } else return null
}

export default Modal

模态/index.js=>调用函数：

import { render } from "react-dom"
import Modal from "./Modal"

const createModal = (content) => render(
    <Modal key={Math.random()} content={content} />, document.getElementById("modal-container")
)

export default createModal

Answer 1

它以这种方式使用 createRoot 而不是渲染：

这是一个例子：CodeSandbox

模态/index.js

import { createRoot } from 'react-dom/client'
import Modal from "./Modal"

const createModal = (content) => {
    if (!window.modalContainer) {
        window.modalContainer = createRoot(document.getElementById('modal-container'))
    }

    window.modalContainer.render(<Modal key={Math.random()} content={content} />)
}
export default createModal

它检查之前是否调用过指定组件上的 createRoot，因此它只调用一次 createRoot，并且在创建新模态时调用渲染函数。

如果您有更好的答案，那也太棒了。 :)