Question

我想将React Hook的setter传递给子组件。这样子组件中的按钮将通过设置器更新状态，该设置器保存在父组件中。我尝试了以下安装程序，但收到错误消息：

TypeError：setshowOptionPC不是函数 onClick

我的方法是否可行？如果没有的话，我怎么可能使用React Hook来做那个结构。

下面是我的代码的简化版：

import React, { useState } from "react";

function ChildComponent({ setshowChildOptionBC, setshowChildOptionPC }) (
  <div>
    <button
      onClick={() => {
        setshowChildOptionPC(false);
        setshowChildOptionBC(true);
      }}
    >
      BC
    </button>
    <button
      onClick={() => {
        setshowChildOptionPC(true);
        setshowChildOptionBC(false);
      }}
    >
      PC
    </button>
  </div>
);


function ParentComponent() {
  const [showOptionBC, setshowOptionBC] = useState(true);
  const [showOptionPC, setshowOptionPC] = useState(false);

  return (
    <div>
      <ChildComponent
        setshowChildOptionBC={setshowOptionBC}
        setshowChildOptionPC={setshowOptionPC}
      />
      {showOptionBC && <div>BC</div>}
      {showOptionPC && <div>PC</div>}
    </div>
  );
}

export default ParentComponent;

Answer 1

我认为您只是忘记了破坏子组件中的道具。这可能会有帮助。

function ChildComponent({setshowOptionBC, setshowOptionPC}) {..

Answer 2

将设置状态函数或挂钩传递给子代是不好的做法，您应该将它们保留在初始化它们的组件中。在您的情况下，您只需要在父组件中创建一个不同的功能，然后传递给子组件。

import React, { useState } from "react";

function ChildComponent({ setChildOptionBC, setChildOptionPC }) (
  <div>
    <button
      onClick={() => {
        setChildOptionPC(false);
        setChildOptionBC(true);
      }}
    >
      BC
    </button>
    <button
      onClick={() => {
        setChildOptionPC(true);
        setChildOptionBC(false);
      }}
    >
      PC
    </button>
  </div>
);


function ParentComponent() {
  const [showOptionBC, setshowOptionBC] = useState(true);
  const [showOptionPC, setshowOptionPC] = useState(false);

  const setChildOptionBC = (bool) => {
    setshowOptionBC(bool)
  }

  const setChildOptionPC = (bool) => {
    setshowOptionBC(bool)
  }

  return (
    <div>
      <ChildComponent
        setChildOptionBC={setshowOptionBC}
        setChildOptionPC={setshowOptionPC}
      />
      {showOptionBC && <div>BC</div>}
      {showOptionPC && <div>PC</div>}
    </div>
  );
}

export default ParentComponent;

如何将React Hook传递给子组件

2 个答案: