Javascript 是否使用ref以编程方式触发单击事件？

我有2个按钮，我希望我可以通过ref触发点击事件

const Button = ({ ref }) => (
  <button onClick={() => alert("btn 2 clicked")} ref={ref}>
    btn 2
  </button>
);
export default function App() {
  const btnRef = useRef(null);
  return (
    <div className="App">
      <button
        onClick={() => {
          btnRef && btnRef.current && btnRef.current.click();
        }}
      >
        btn 1
      </button>
      <br />
      <br />
      <Button ref={btnRef} />
    </div>
  );
}

const按钮=（{ref}）=>(
警报（“btn 2已单击”）}ref={ref}>
btn 2
);
导出默认函数App（）{
const btnRef=useRef（null）；
返回(
{
btnRef&&btnRef.current&&btnRef.current.click（）；
}}
>
btn 1




);
}

但它不起作用，我在这里错过了什么？ 您需要使用

const按钮=React.forwardRef（（道具，ref）=>(
警报（“btn 2已单击”）}ref={ref}>
btn 2
));

例如：

const Button = React.forwardRef((props, ref) => (
  <button onClick={() => alert("btn 2 clicked")} ref={ref}>
    btn 2
  </button>
));