如何 append 或在 React 树外的模态中注入 React Class 组件

Question

我们在 PHP MVC 框架中构建了一个项目，我们使用 jQuery 作为全局 JS 框架来处理 UI 活动等，但是，我们现在使用的是 react js。 因此，我的问题是如何向当前的 jquery 内置 modal() 组件注入或 append React 功能/基于类的组件？ 我尝试运行以下代码，但模态内容显示 [object Object] ...

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 元素进行任何进一步的更改。