javascript - 如何将 React Hook 传递给子组件
问题描述
我想将 React Hook 的设置器传递给子组件。这样子组件中的按钮通过保存在父组件中的 setter 更新状态。我尝试了以下设置,但收到一条错误消息:
类型错误: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;
解决方案
我认为您只是忘记解构子组件中的道具。这可能会有所帮助。
function ChildComponent({setshowOptionBC, setshowOptionPC}) {..
推荐阅读
- corda - 搜索链我可以找到是否已经消耗了某些东西以及它是由什么消耗的?
- docker - K6 InfluxDB + Grafana Docker:一个容器可以运行多少个虚拟用户?
- ansible - Ansible Conditional - 将注册变量与值进行比较
- python - 对多个 HTTP 请求进行异步状态检查
- parallel-processing - 使用两个应用程序时重定向 mpirun 标准输出 (MIMD)
- php - 无法将新闻项目附加到数据透视表中的用户
- sas - 使用 proc sql 过滤更高的值
- python - gunicorn 问题 - 文件不可执行
- apache - 带有 mod_auth_mellon 的“lasso_saml20_provider_load_metadata”上的分段错误
- c++ - 为已编写的控制台应用程序制作界面的正确 C++ GUI 库是什么?