时间戳

首页 > 解决方案 > 在 nextjs 应用程序中，如何从另一个组件触发一个组件中的功能

javascript - 在 nextjs 应用程序中，如何从另一个组件触发一个组件中的功能

问题描述

正如标题所说，我在一个简单的 NextJS 应用程序的页面上有 2 个自定义组件：

<section>

   <CompA></CompA>
   <CompB></CompB>

</section>

如何让 CompB 中的按钮触发 CompA 中包含的函数？

我认为我应该以某种方式使用状态，但我有点迷失如何在 NextJS 中做到这一点。这里的简单代码示例：https ://github.com/Chenzo/nextjs-comp-to-comp

标签： javascriptreactjsnext.js

解决方案

从技术上讲，您可以使用useImperativeHandlehook 来做到这一点，但这并不完全是“React 方式”：

const CompA = forwardRef(({ children }, ref) => {
  useImperativeHandle(ref, () => ({
    doSmth: () => {
      console.log('CompA - function');
    },
  }));

  return (
    <div>
      <h2>Component A</h2>
    </div>
  );
});

const CompB = ({ onClick }) => {
  return (
    <div>
      <h2>Component B</h2>
      <button onClick={onClick}>Trigger CompA function</button>
    </div>
  );
};

export default function Home() {
  const compARef = useRef();
  const handleCompBClick = useCallback(() => compARef.current?.doSmth(), []);

  return (
    <section>
      <CompA ref={compARef}></CompA>
      <CompB onClick={handleCompBClick}></CompB>
    </section>
  );
}

正如我上面所写，很可能有一种更正确的方法来解决您的问题，避免使用命令式方法。该决定将取决于组件 A 和 B 在实际应用程序中的确切用途。

推荐阅读