如果我們有Foo實體化類的 React 組件，Bar并且我們需要將HTMLCollection帶有 ID 的元素傳遞foo給Bar，那該怎么做呢？
Bar.js理想情況下應該保持不變。
我嘗試了以下方法：
Foo.js
import Bar from './Bar';
const Foo = () => {
const elem = document.getElementById('foo');
const bar = new Bar(elem, {});
return (
<div id="foo">
</div>
);
};
export default Foo;
酒吧.js
export default class Bar {
constructor(domElement, config = {}) {
console.log(domElement); // null
console.log(domElement.getElementsByClassName('bar')); // null
}
}
但domElement總是null，也許是因為當我們運行時document.getElementById，元素div#foo還沒有被渲染。
還嘗試了使用useRef：
Foo.js
import { useRef } from 'react';
import Bar from './Bar';
const Foo = () => {
const elemRef = useRef(null);
const bar = new Bar(elemRef, {});
return (
<div id="foo" ref={elemRef}>
</div>
);
};
export default Foo;
酒吧.js
export default class Bar {
constructor(domElement, config = {}) {
console.log(domElement); // {current: null}
console.log(domElement.getElementsByClassName('bar')); // Uncaught TypeError: domElement.getElementsByClassName is not a function
}
}
但得到錯誤
未捕獲的型別錯誤：domElement.getElementsByClassName 不是函式
這樣做的正確方法是什么？
uj5u.com熱心網友回復：
您可以使用useLayoutEffect鉤子，它會在所有 DOM 突變后同步觸發
useLayoutEffect(() => {
const elem = document.getElementById("foo");
const bar = new Bar(elem, {});
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/487849.html
標籤：javascript html 反应 dom 反应钩子
上一篇：根據按鈕單擊填充下一個空文本輸入