如何在 React Tree 之外的模态中附加或注入 React Class 组件

Question

我们在 PHP MVC 框架中构建了一个项目，我们使用 jQuery 作为处理 UI activity 等的全局 JS 框架，但是，我们现在使用反应 js。因此，我的问题是 如何将 React Functional/Class-based 组件注入或附加到当前 jquery 内置 modal() 组件？我尝试运行以下代码，但模态内容显示 [object Object]...

onClick 处理程序：

this.testHandler = () => {
            const x = `<div>${<Component />}</div>`
            $('#test-123').modal()
            $('#test-123 #modal-body').append(x)
        }

这个组件 Returns 一个 Table 带有来自 api 端点的数据列表，当我渲染它时 table 正在工作并正确显示。但我的主要目标是在外部使用它并将其作为模态内容注入。

提前致谢！

Answer 1

在 React 之外渲染 React 组件的方法是调用 ReactDOM.render，传入要渲染的 React 元素和要放入的 dom 元素。对于站点在反应中完全完成，你通常会调用它一次。但如有必要，您可以即时或多次执行此操作，针对您的 dom.

的特定部分

const element = $('#test-123 #modal-body').get(0);
ReactDom.render(<div><Component /></div>, element);

请注意，React 假定它是唯一一段修改 dom 树的部分代码，您告诉它要在其中操作。因此您应该避免对 #modal-body 进行任何进一步的更改使用 jquery.

的元素

如何在 React Tree 之外的模态中附加或注入 React Class 组件

How to append or inject React Class Component in a Modal outside React Tree

javascript

jquery

reactjs

react-modal