javascript - 在 JavaScript 库上创建门户创建回调

Question

我有一个外部库（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 而言，这可能是意外的）

Answer 1

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