ReactDOM.render 变成 <div> 不会立即产生 HTML答案

【问题标题】：ReactDOM.render into a <div> does not immediately produce HTMLReactDOM.render 变成 <div> 不会立即产生 HTML
【发布时间】：2019-07-26 15:41:44
【问题描述】：

我正在使用 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() 有时可以工作asynchronously：

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

在调试时，我这样做了：

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() 选择异步渲染内容的唯一地方。

【问题讨论】：

我发现了一些拼写错误，您的第一个代码块中有两个 returns。
是否可以将tooltipFormatter 转换为异步方法？然后你可以包装React.DOM.render，它在一个返回promise的函数中接受一个回调，你可以在await里面tooltipFormatter。
@Huy 谢谢，我修好了。
@SungM.Kim 我对此表示怀疑，因为 Highcharts 是 config.tooltip.formatter 的调用者，并且该上下文可能不是 async 上下文。

标签： javascript reactjs asynchronous highcharts react-highcharts

【解决方案1】：

我最终使用了

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

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

虽然我愿意打赌 Portals 可能会解决问题，但我无法获得 Highcharts 渲染工具提示或图例标签的 DOM 节点的 ref。

【讨论】：