在元素被渲染之前将HTML元素传递给React组件

Question

如果我们有实例化类Bar的React组件Foo，并且我们需要将ID为foo的HTMLCollection元素传递到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;

Bar.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;

Bar.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
}
}

但是得到错误

Uncaught TypeError: domElement。getElementsByClassName不是一个函数

正确的做法是什么?

Answer 1

你可以使用uselayouteeffect钩子，它在所有DOM变化后同步触发

useLayoutEffect(() => {
const elem = document.getElementById("foo");
const bar = new Bar(elem, {});
}, []);