在渲染元素之前將 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;

酒吧.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 不是函數

這樣做的正確方法是什么？

Answer 1

您可以使用useLayoutEffect鈎子，它會在所有 DOM 突變后同步觸發

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