我如何进行同步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执行。ReactElmDOMNode

希望这可以帮助！

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

使用示例：

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'))