在 JavaScript 库上创建门户创建回调答案

【问题标题】：Create portal on JavaScript library create callback在 JavaScript 库上创建门户创建回调
【发布时间】：2021-02-10 07:00:05
【问题描述】：

我有一个外部库（DataTable），它在 React 之外操作 DOM，幸运的是，每当创建元素（在本例中为列）时，该库都会提供一些回调。

目前我正在使用这个回调来覆盖默认的渲染行为并在元素内部渲染一个 React 组件：

// This is a method of the parent component
createdCell: function (td, cellData, rowData, row, col) {
    ReactDOM.render(
        <SdrStatus sdr={rowData} details={false} tableRef={tableRef}/>,
        td
    );
},

一切都很好，这个 SdrStatus 组件不是父组件的子组件（所有 cons 上下文不共享，...）

我想使用门户将此子组件与父组件连接：

// This is a method of the parent component
createdCell: function (td, cellData, rowData, row, col) {
    ReactDOM.createPortal(
        <SdrStatus sdr={rowData} details={false} tableRef={tableRef}/>,
        td
    );
},

但在这种情况下，在 UI 上，结果如下：

有人知道这可能是什么问题吗？请考虑从 DOM 的角度来看，td 是父组件的容器 div 的子项（也许这对于 createPortal 来说是意料之外的）

【问题讨论】：

标签： javascript html reactjs react-portal

【解决方案1】：

用有限的信息很难说清楚，但是你附上的 [object object] 截图通常发生在 react props 渗入 DOM 时。这意味着，您提供给组件/表的道具可能不匹配。 TD 本身是在 React 中还是在 React 之外管理？答案将取决于此。

【讨论】：

这不是答案。当您有足够的声誉时，请将此作为评论发布。