如何在React树外的模态中附加或注入React类组件

Question

我们有一个在PHP MVC框架中构建的项目，我们使用jQuery作为处理UI活动等的全局JS框架，然而，我们现在使用的是react JS。因此，我的问题是如何将React Functional/基于类的组件注入或附加到当前jquery内置的modal((组件？我尝试运行以下代码，但模态内容显示[对象对象]

onClick处理程序：

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

这个组件返回一个表，其中包含来自api端点的数据列表，当我渲染它时，该表正在正常工作和显示。但我的主要目标是在外部使用它，并将其作为模态内容注入。

提前感谢！

Answer 1

在react之外渲染react组件的方法是调用ReactDOM.render，传入要渲染的react元素和要放入的dom元素。对于在react中完全完成的站点，通常只调用一次。但如果有必要，你可以在飞行中或多次进行，针对你dom的特定部分。

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

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