我如何進行同步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) 。 一旦ReactElm加載到DOMNode就會執行callback 。

希望這可以幫助！

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>