如何将 React 组件的自定义钩子与“map”一起使用

关键词：

【中文标题】如何将 React 组件的自定义钩子与“map”一起使用【英文标题】：How to use React component's custom hook with "map" 【发布时间】：2021-04-07 21:51:04 【问题描述】：

我正在尝试制作一个Checkbox 组件。

这是我的Checkbox.tsx。

import React from "react";
import * as S from "./style";

const Checkbox: React.FC<S.ICheckboxProps> = ( checked, setChecked ) => 
  return <S.StyledCheckbox checked=checked onClick=setChecked />;
;

这是我的useCheckbox.tsx，

import  useState  from "react";

export const useCheckbox = (initialState: boolean) => 
  const [checked, _setChecked] = useState<boolean>(initialState);
  const setCheckedToggle = () => _setChecked((prev) => !prev);
  const setCheckedTrue = () => _setChecked(true);
  const setCheckedFalse = () => _setChecked(false);
  return  checked, setCheckedToggle, setCheckedTrue, setCheckedFalse ;
;

export default Checkbox;

效果很好。我可以这样使用

import Layout from "components/Layout";
import  useCheckbox  from "hooks/useCheckbox";
import Checkbox from "components/Checkbox";

const Home = () => 
  const  checked, setCheckedToggle  = useCheckbox(false);
  return (
    <Layout>
      <Checkbox checked=checked setChecked=setCheckedToggle />
    </Layout>
  );
;

export default Home;

但我在List 组件中遇到了问题。

List 有一个Checkbox 组件，我必须将此List 与data 一起使用。

const Home = (data) => 
  return (
    <Layout>
      data.map((d) => <List />)
    </Layout>
  );
;

这种情况下，有没有办法判断列表是否被选中？

如果List 具有useCheckbox，则Home 组件不知道checked 状态。

我应该在Home 组件中使用useCheckbox data.length 次吗？我觉得这样不好。

感谢阅读，新年快乐。

【问题讨论】：

为什么你有两个同名的组件？ - 您的代码很好，但您需要在 map() 函数上使用数据之前检查数据是否实际存在。类似于 data.length > 0 && data.map() 【参考方案1】：

如果您希望复选框状态存在于Home 级别，那么您需要Home 组件中的状态，该状态可以处理多个项目，可以是数组或对象。

然后，在您映射 data 的位置，您可以将 checked 和 setChecked 作为道具传递给 List，并使用项目索引在 Home 中定义的所有逻辑（或者最好使用 ID，如果有一）与您的Home 状态有关。

这是一个可以在 Home 中使用的钩子示例

import  useState  from "react";

export const useCheckboxes = () => 
  const [checkedIds, setCheckedIds] = useState([]);

  const addToChecked = (id) => setCheckedIds((prev) => [...prev, id]);

  const removeFromChecked = (id) =>
    setCheckedIds((prev) => prev.filter((existingId) => existingId !== id));

  const isChecked = (id) => !!checkedIds.find(id);

  const toggleChecked = (id) =>
    isChecked(id) ? removeFromChecked(id) : addToChecked(id);

  return  isChecked, toggleChecked ;
;

你会这样使用它

const Home = ( data ) => 
  const  isChecked, toggleChecked  = useCheckboxes();

  return (
    <Layout>
      data.map((d) => (
        <List
          key=d.id
          checked=isChecked(d.id)
          toggleChecked=() => toggleChecked(d.id)
        />
      ))
    </Layout>
  );
;

【讨论】：

在 React 中，如何在所有组件中拥有一个自定义钩子实例？

】在React中，如何在所有组件中拥有一个自定义钩子实例？【英文标题】：InReact,howtohaveasingleinstanceofacustomhookinallcomponents?【发布时间】：2021-04-0223:19:27【问题描述】：我有几个组件需要访问相同的玩家列表。这个球员名单不会改... 查看详情

使用钩子将 React Context 与 AsyncStorage 结合使用

...021-07-0714:39:51【问题描述】：我的目标是使用从Context创建的自定义挂钩来传递和修改存储的值最终目标是使用useFeedContext()之类的东西来获取或修改上下文值我实际得到的是我调用的函数未定义或其他问题（我尝试了多种方法）... 查看详情

如何使用钩子将 React 类组件转换为功能组件

】如何使用钩子将React类组件转换为功能组件【英文标题】：HowtoconvertReactclasscomponenttofunctionalcomponentwithhooks【发布时间】：2021-04-2600:54:39【问题描述】：我正在Reactjs中创建一个降价预览器，用户在textarea标记中输入降价，转换后... 查看详情

React-Native：将焦点设置到由数组构建的自定义组件

】React-Native：将焦点设置到由数组构建的自定义组件【英文标题】：React-Native:Settingfocustocustomcomponentbuiltoffanarray【发布时间】：2019-11-1310:47:39【问题描述】：我正在尝试基于数组创建自定义输入列表，当按下回车键时，我希望焦... 查看详情

用于获取数据的自定义 React 钩子无法正常工作

】用于获取数据的自定义React钩子无法正常工作【英文标题】：CustomReacthookforfetchingdataisnotworkingcorrect【发布时间】：2022-01-0118:08:19【问题描述】：我有这个用于从API获取数据的自定义React钩子：importuseState,useEffectfrom\'react\';constAPI... 查看详情

如何将firebase与react功能组件同步？

】如何将firebase与react功能组件同步？【英文标题】：Howtosyncfirebasewithreactfunctionalcomponents?【发布时间】：2020-08-0411:33:50【问题描述】：我正在构建一个简单的React应用程序，使用功能组件（而不是类）。因此，在将数据库与状态... 查看详情

为啥 jest 不能为我正在测试的自定义 React 钩子提供 useTranslation 钩子？

】为啥jest不能为我正在测试的自定义React钩子提供useTranslation钩子？【英文标题】：WhyisjestnotabletoprovidetheuseTranslationhooktoacustomReacthookI\'mtesting?为什么jest不能为我正在测试的自定义React钩子提供useTranslation钩子？【发布时间】：2021... 查看详情

如何创建一个接收依赖项的自定义钩子？

】如何创建一个接收依赖项的自定义钩子？【英文标题】：Howtocreateacustomhookthatrecivesdependencies?【发布时间】：2020-02-0106:33:45【问题描述】：我正在制作一个自定义钩子，当某些状态发生变化时会有一个工具。您应该能够传递数... 查看详情

用 Jest 模拟 React 自定义钩子

...Jest【发布时间】：2021-03-2323:38:28【问题描述】：在对React组件进行单元测试时，我需要模拟我的自定义钩子。我已经阅读了一些关于这个简单任务的教程和***答案，但没有正确实现它。我最简单的单一测试设置如下：//TestComponent... 查看详情

如何使用钩子将项目附加到 React 组件中的数组？

】如何使用钩子将项目附加到React组件中的数组？【英文标题】：HowcanIappendanitemtoanarrayinaReactcomponentusinghooks?【发布时间】：2019-12-1612:21:15【问题描述】：我正在尝试使用Socket.io和React（钩子）构建一个聊天室。我向服务器发送和... 查看详情

DevTools 中带有 React 钩子的组件名称

】DevTools中带有React钩子的组件名称【英文标题】：ComponentnamewithReacthooksinDevTools【发布时间】：2020-01-2714:13:30【问题描述】：我刚刚将一个基于类的组件更新为功能组件。当我查看React的DevTools时，我通常会看到名为Gallery的组件... 查看详情

react js map功能无法渲染自定义组件

】reactjsmap功能无法渲染自定义组件【英文标题】：reactjsmapfunctioncannotrenderthecustomcomponent【发布时间】：2022-01-2313:46:27【问题描述】：我在这里从firestore获取帖子数据并将其显示给我自己的自定义组件。这里是map函数的代码：posts... 查看详情

React-Bootstrap 的下拉菜单组件上的自定义样式

...在尝试将自定义css样式应用于reactbootstrap组件，但不知道如何访问组件JSX中不明确的元素。例如：<ButtonGroup><DropdownButtonclas 查看详情

如何使用自定义 React 钩子通过 Axios 发出 POST 或 DELETE 请求

】如何使用自定义React钩子通过Axios发出POST或DELETE请求【英文标题】：HowtouseacustomReacthooktomakeaPOSTorDELETErequestwithAxios【发布时间】：2022-01-2208:50:19【问题描述】：我正在尝试在React中创建一个通用的useAxios钩子。我希望能够将此钩... 查看详情

在自定义钩子中访问 Redux 状态？

...一个使用Redux状态的自定义钩子。如果你要将状态从React组件传递给函数，它看起来像：自定义钩子：functionuseMyCustomHook(state)constmessage=state;consthandleClick=()=>if(envi 查看详情

如何使用 JEST、Enzyme 在 React 中测试自定义钩子？

】如何使用JEST、Enzyme在React中测试自定义钩子？【英文标题】：HowtotestcustomhooksinReactusingJEST,Enzyme?【发布时间】：2021-03-1009:07:30【问题描述】：我有一个像下面这样的自定义钩子constuseSum=(a=1,b=1)=>const[sum,setSum]=useState(a+b);useEffect... 查看详情

React ，自定义钩子慢渲染

...述】：您好，我制作了一个自定义钩子，它与通用表单的组件一起使用，但是，我注意到状态更改时它很慢。#customHookexportconstuseFormController=(meta)=>constsetVisible,setLoading=useContext(FeedBa 查看详情

如何在通过 NPM 分发时管理 React 组件（Redux、CSS）的自定义方面

】如何在通过NPM分发时管理React组件（Redux、CSS）的自定义方面【英文标题】：HowtomanagecustomaspectsofaReactcomponent(Redux,CSS)whilstdistributingviaNPM【发布时间】：2018-11-2504:34:57【问题描述】：问题：自定义Redux容器和CSS通常如何通过NPM处... 查看详情