Reactjs 定位数组中的一项(React、useState)

const dashboardItems = ["news", "notifications", "letters"];

const Settings = (props) => {
  const { t } = useTranslation("settings");
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <SideMenu class="dashboard-settings">
      <SideMenu.Item>
        <SideMenu.Header>{t("Dashboard Settings")}</SideMenu.Header>
      </SideMenu.Item>
      {dashboardItems.map((dashboardItem) => (
        <SideMenu.Item key={dashboardItem}>
          {t(dashboardItem)}{" "}
          <Switch
            onClick={handleClick}
            status={isActive ? "active" : "inactive"}
          />
        </SideMenu.Item>
      ))}
    </SideMenu>
  );
};

const [isActive, setIsActive] = useState({});

<Switch 
  onClick={() => {
    setIsActive(s => ({ 
      ...s, 
      [dashboardItem]: !s[dashboardItem]
    }))
  } 
  status={isActive[dashboardItem] ? 'active' : 'inactive'}
/>

Reactjs相关问答推荐

Firebase删除UserWithEmail AndPassword仅创建匿名用户

是否可能有不同的加载器用于路径有查询参数和没有查询参数，或者在React Router 6中添加它们时有条件地跳过一个加载器？

Reaction路由的问题-在Effect使用API调用响应设置状态之前呈现页面

Reaction Axios多部分/表单-数据数组不工作

在React Create App TS项目中安装material UI

不同步渲染

获取未捕获的错误：Gatsby生产版本上的最小化react 错误#418

ReactJS：唯一项目的数量总和

太多的重新渲染 - React 中的无限循环.如何使用React.effect并使用fetch？

设置自定义形状的纹理

如何根据ReactJS中元素列表中的布尔值仅显示一次值

i18next中复数键的理解

当`useSelector`回调中的属性值更新时，将会使用更新后的值吗？

如何在 React.js 中提取 PDF 的内容？

下一个js如何从另一个组件更新组件？

使用 Vite 的 React 中的路由无法正常工作(构建中)

Reactjs 表单未反映提交时的更改

错误：无效挂钩调用.钩子只能在函数组件的主体内部调用.使用 next/router 时

模块解析失败：意外令牌 (257：106) 您可能需要适当的加载程序来处理此文件类型

React.js 中的页面崩溃(读取未定义的属性)