javascript - 使用 forwardRef 传递多个元素

Question

如何使用从组件传递多个元素forwardRef

loader--holder我有这个组件，我想单独传递loader--holder__logo给父函数组件

const Loader = forwardRef((props, ref) => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  return (
    <div className="loader--holder" ref={ref1}>
      <div className="loader--holder__box">
        <div className="loader--holder__logo"ref={ref2}>
          <img src={logo} alt="logo" />
        </div>
      </div>
    </div>
  );
});

父组件

export default function HomePage() {
  const ref = React.createRef();
  return (
   <div>
      <Loader ref={ref} />
   </div>
)
}

标签： javascriptreactjs

Answer 1

只需将您需要的内容分配给转发的 ref：

const Loader = forwardRef((props, ref) => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);

  useEffect(() => {
    if (ref) {
      ref.current = {
        ref1,
        ref2,
      };
    }
  }, [ref]);

  return (
    <div className="loader--holder" ref={ref1}>
      <div className="loader--holder__box">
        <div className="loader--holder__logo" ref={ref2}>
          <div>Hello</div>
        </div>
      </div>
    </div>
  );
});

// Usage
export default function HomePage() {
  const ref = useRef();

  useEffect(() => {
    console.log('in parent', ref);
  }, []);

  return <Loader ref={ref} />;
}