React向父组件公开DOM引用

import React, { useRef } from 'react';

function ChildComponent() {
  const domRef = useRef(null);

  // 在需要的时候，可以通过ref属性获取DOM元素的引用
  // 这里使用了useEffect来模拟组件挂载后的操作
  useEffect(() => {
    if (domRef.current) {
      // 进行DOM操作，比如修改样式、添加事件监听等
      domRef.current.style.color = 'red';
    }
  }, []);

  return <div ref={domRef}>子组件的DOM元素</div>;
}

function ParentComponent() {
  const childDomRef = useRef(null);

  // 在需要的时候，可以通过子组件的ref属性获取子组件中的DOM元素引用
  const handleClick = () => {
    if (childDomRef.current) {
      // 进行子组件中DOM元素的操作
      childDomRef.current.style.backgroundColor = 'blue';
    }
  };

  return (
    <div>
      <ChildComponent ref={childDomRef} />
      <button onClick={handleClick}>操作子组件的DOM元素</button>
    </div>
  );
}