javascript - react 渲染插入相邻元素

Question

在元素及其容器上调用 React render 时如何指定相对于元素的位置？

即
ReactDOM.render(element, document.getElementById('divInTheBody'));

假设我想在元素本身之前插入这个元素('beforebegin')。 我该怎么做？

https://reactjs.org/docs/react-dom.html#render
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Answer 1

首先，给你想要操作的 JSX 元素添加一个 'id' -

<div id="foo" style={{position: 'relative'}}> Some Text</div>

现在在你的组件中，你可以调用

useEffect(() => {
    let elem = document.getElementById('foo')
    elem.insertAdjacentHTML('beforebegin', 
        <div style={{position: 'absolute' bottom:'10px'}}>
            Dynamic Component
        </div>)
}, [])

希望这就是您要找的。