![](/img/trans.png)
[英]How to communicate ReactDOM.render with other ReactDOM.render
[英]How do I do a synchronous ReactDOM.render
对于我的应用程序,我需要渲染一些孩子,然后测量结果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可能在未来变得异步。 是否有一个面向未来的选项来强制同步渲染,以便上述功能可以工作?
您可以将回调传递给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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.