在Javacript libary创建回调上创建门户

问题描述

我有一个外部库（DataTable），可在React外部操作DOM，幸运的是，只要创建了元素（在本例中为列），该库就会提供一些回调。

此刻，我正在使用此回调方法来覆盖默认的渲染行为，并在元素内部渲染一个React Component：

// 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组件不是父组件的子组件（所有缺点环境都不共享，...）

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

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

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

有人知道这可能是这里的问题吗？请从DOM角度考虑，td是父组件容器div的子代（对于createPortal来说可能是意外的）

解决方法

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