Reactjs 如何在React中添加到父事件处理程序

我有一个React页面设置根容器页面，其中包含一个全局头组件和一些子组件（通过React路由器，但这可能不相关）。Header组件具有需要执行特定操作（如导航）的按钮，但也需要具有由子组件指定的功能。我环顾四周寻找有关回调和道具的信息，但我不知道如何实现这一点。（注意，我也在使用Redux，但我的理解是，您不应该将函数保存在Redux状态，因为它们是不可序列化的）

我的场景的简化版本：

// Container Page
const Container = () => {
  const onNavigate = () => {
    // How could Cat or Dog component add extra functionality here before navigate() is called?
    navigate('/complete');
  };

  return (
    <Header onButtonClick={onNavigate}>
    <Switch>
      <Route path='/cats' component={Cat} />
      <Route path='/dogs' component={Dog} />
    </Switch>
  );
}

// Cat component 
const Cat = (props) => {

  const speakBeforeNavigating = () => {
    // This needs to happen when the "Navigate" button in the Header is clicked
    console.log("Meow!");
  };

  return (
    <span>It is a cat</span>
  );
}

//容器页面
常量容器=（）=>{
const onNavigate=（）=>{
//在调用navigate（）之前，Cat或Dog组件如何在此处添加额外的功能？
导航（'/complete'）；
};
返回(
);
}
//Cat组件
常数猫=（道具）=>{
const speakbefore导航=（）=>{
//这需要在单击标题中的“导航”按钮时发生
console.log（“喵！”）；
};
返回(
它是一只猫
);
}

您可以使用上下文api并将其作为道具发送。在将其作为道具发送时，可以将回调函数传递给onNavigate函数。像这样

const onNavigate = (callback) => {
  callback();

  navigate('/complete');
}

你是这样用的

<button onClick={() => onNavigate(() => console.log('blabla'))}

onNavigate（（）=>console.log（'blabla'））}

---

对于上下文api信息，我建议您查看React官方文档。

我的建议是您在父组件中定义所有回调，这就是为什么我必须与您再次确认回调不需要访问子组件的内部状态

我将分别为每个

路线

定义道具，并在道具中包含

回调

const ROUTES = [
  {
    path: "/cats",
    component: Cat,
    callback: () => console.log("Meow!")
  },
  {
    path: "/dogs",
    component: Dog,
    callback: () => console.log("Woof!")
  }
];

// Container Page
const Container = () => {
  // functionality is based on the current page
  const match = useRouteMatch();

  // need history in order to navigate
  const history = useHistory();

  const onNavigate = () => {
    // find the config for the current page
    const currentRoute = ROUTES.find((route) => route.path === match.path);
    // do the callback
    currentRoute?.callback();
    // navigate
    history.push("/complete");
  };

  return (
    <>
      <Header onButtonClick={onNavigate} />
      <Switch>
        {ROUTES.map((props) => (
          <Route key={props.path} {...props} />
        ))}
      </Switch>
    </>
  );
};

const路由=[
{
路径：“/cats”，
组件：Cat，
回调：（）=>console.log（“喵喵！”）
},
{
路径：“/狗”，
组成部分：狗，
回调：（）=>console.log（“Woof！”）
}
];
//容器页面
常量容器=（）=>{
//功能基于当前页面
const match=useRouteMatch（）；
//需要历史记录才能导航
const history=useHistory（）；
const onNavigate=（）=>{
//查找当前页面的配置
const currentRoute=ROUTES.find（（route）=>route.path==match.path）；
//回拨
currentRoute？.callback（）；
//导航
历史。推送（“/完成”）；
};
返回(
{ROUTES.map（（道具）=>(
))}
);
};

我正在努力了解您的要求

onNavigate

始终导航到

'/complete'

页面，但我们希望根据当前所在的页面扩展该行为。对吗？真正的问题是——这些回调函数是纯粹的函数，我们只需知道它是猫还是狗，就可以从

容器

调用它们，还是回调需要访问

Cat

组件的内部状态？谢谢你的澄清问题。我可能有点过于简化了：导航也是基于页面的动态导航，但我已经设法使用Redux状态解决了这个问题。回调也可以使用ReDux状态，否则我们可以认为它们是纯函数（没有CAT/DOG组件的内部状态）。（缺少的另一个细节是可能有更多的组件，而不仅仅是Cat/Dog。重点是将标题与这些组件分离，以允许在那里添加任意数量的新类型。但是，希望在这个框架中，它们将以相同的方式工作）。我实际上是沿着这条路径开始的，但当我了解到您不应该在redux store中添加函数时，我正在将路由添加到redux store。现在我意识到我可以将它放在其他位置，只需将键/索引/路径保存到redux中的正确路由，即可到达正确的回调。