javascript 如何做一个同步的ReactDOM.render

3yhwsihp 于 2023-11-15 发布在 Java

关注(0)|答案(2)|浏览(139)

对于我的应用，我需要渲染一些子元素，然后测量结果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将来可能会变成异步的。是否有一个面向未来的选项来强制同步渲染，以便上面的函数可以工作？

JavaScript

来源：https://stackoverflow.com/questions/40319092/how-do-i-do-a-synchronous-reactdom-render

2条答案

按热度按时间

fnx2tebb1#

你可以给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>

的数据

赞(0）回复(0）举报 2023-11-15

m3eecexj2#

在React 18+中，我们可以使用renderToString：

const view = renderToString(<div id="text-div-id">{text}</div>);

    const outerEl = document.getElementById('outer-div-id') as HTMLDivElement;
    outerEl.innerHTML = view;

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

字符串

赞(0）回复(0）举报 2023-11-15

我来回答

javascript 如何做一个同步的ReactDOM.render

2条答案

相关问题

热门标签

最新问答