0

我正在使用 React v16.7，我正在尝试将 React 组件注入到第三方 JS 库（即 Highcharts）中，该库需要我从函数返回 HTML。这就是我现在正在做的事情：

function tooltipFormatter(dataPoint) {
    // ... Calculate props according to the dataPoint here ...
    const mountPoint = document.createElement('div');
    ReactDOM.render(<Tooltip {...tooltipProps} />, mountPoint);
    return mountPoint.innerHTML;
}

我在配置对象中传递这个函数，如下所示：

const config = {
    ...,
    tooltip: {
        ...,
        formatter() {
            return tooltipFormatter(this);
        }
    }
}

我遇到的问题mountPoint.innerHTML是空的。我发现ReactDOM.render()有时异步工作：

ReactDOM.render()当前返回对根ReactComponent实例的引用。然而，使用这个返回值是遗留的，应该避免，因为未来版本的 React 在某些情况下可能会异步渲染组件。如果您需要对根ReactComponent实例的引用，首选的解决方案是将回调引用附加到根元素。

在调试时，我这样做了：

ReactDOM.render(<Tooltip {...tooltipProps} />, mountPoint, () => {
    console.log(mountPoint.innerHTML); // non-empty 
});
console.log(mountPoint.innerHTML);  // empty
return mountPoint.innerHTML;

如何强制ReactDOM.render()在同步环境中工作？令人费解的是，这return mountPoint.innerHTML在我们的应用程序的其余部分都有效，但似乎这种情况是唯一ReactDOM.render()选择异步呈现内容的地方。

4

1 回答 1

0

我最终使用

return ReactDOM.renderToStaticMarkup(<Tooltip {...props} />);

因为我的组件不是交互式的（没有事件监听器，而且我的组件不是有状态的）。

虽然我愿意打赌Portal可能会解决这个问题，但我无法获得refHighcharts 将工具提示或图例标签呈现到其中的 DOM 节点。

于 2019-07-26T18:09:39.173 回答