Question

目标：从父级到子级发送回调函数以切换侧边栏组件。

此代码打开侧边栏：

<Sidebar show={status} />

  <button onClick={() => setStatus((status) => !status)}>
      <SettingsIcon/>
  </button>

我对 status 使用 true 和 false 值来打开和关闭侧边栏。

现在，在我的侧边栏组件中，我需要将 false 值传递给 show，以便在我的 Back 按钮被点击时关闭。

const Sidebar = ({ show }) => {
  const { left } = useSpring({
    from: { left: "-100%" },
    left: show ? "0" : "-100%",
  });

  return (
    <animated.div
      style={{
        left: left,
        position: "absolute",
        height: "100%",
        width: "55%",
        backgroundColor: "black",
        zIndex: 1,
      }}
      className="Sidebar"
    >
      <button onClick={() => !show}>Back</button>
      <p>hello</p>
    </animated.div>
  );
};

我似乎无法让它工作。知道我做错了什么吗？

Answer 1

现在你正在改变一个道具，根据反应文档，你不应该doing，你最简单的方法是传递一个回调，它在你的侧边栏 onClick 中执行相同的操作，但作为道具，并使用 setStatus 函数，而不是手动进行更改，如下所示：

<Sidebar show={status} onSidebarClick={() => setStatus(!status)} />

在侧边栏组件中，您只需要执行以下操作：

const Sidebar = ({ show, onSidebarClick }) => {
  // Your code

  return (
   {/* Rest of your JSX */}
    <button onClick={onSidebarClick}>Back</button>
  )
}

您应该从父级传递回调函数并使用 setStatus 函数来执行更改。不要尝试在没有 setStatus 函数的情况下自己进行更改。

将回调函数从父组件传递给子组件反应

1 个答案: