防止在将组件作为内容插入到另一个组件中时创建组件(角度2)

import React, { useRef } from 'react';

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

  const handleClick = () => {
    childRef.current.doSomething();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>调用子组件方法</button>
    </div>
  );
}

const ChildComponent = React.forwardRef((props, ref) => {
  const doSomething = () => {
    console.log('子组件方法被调用');
  };

  // 将组件的引用传递给父组件
  React.useImperativeHandle(ref, () => ({
    doSomething
  }));

  return <div>子组件</div>;
});

export default ParentComponent;