如何进行同步 ReactDOM.render

Question

对于我的应用程序，我需要渲染一些子项，然后测量生成的 div。在伪代码中，它看起来像这样：

function getDims(child) {
    var testEl = document.getElementById('test-el');
    ReactDOM.render(child, testEl);
    var dims = testEl.getBoundingClientRect();
    ReactDOM.unmountComponentAtNode(testEl);
    return dims;
}

不幸的是，根据文档，ReactDOM.render 将来可能会变得异步。是否有一个面向未来的选项来强制同步渲染，以便上述功能可以工作？

Answer 1

您可以将回调传递给

ReactDOM.render(ReactElm, DOMNode, callback)

。一旦

callback

加载到

ReactElm

中，

DOMNode

将被执行。

希望这有帮助！

function getDims(child) {
    var testEl = document.getElementById('test-el');
    ReactDOM.render(child, testEl, function(){
       var dims = testEl.getBoundingClientRect();
       ReactDOM.unmountComponentAtNode(testEl);
       return dims;
    }); 
}

使用示例：

class App extends React.Component{
  render(){ return <h1>Hello</h1>}
}
  
  ReactDOM.render(<App/>,
    document.getElementById('app'),
    () => console.log('Component Mounted'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

在上面的 React 中，我们可以使用

renderToString

:

    const view = renderToString(<SizeHelper id="text-div-id" text={text} cssStyle={cssStyle} />);
    this.rootEl.innerHTML = view;

    const textEl = document.getElementById('text-div-id') as HTMLDivElement;
    const bounding = textEl.getBoundingClientRect();