如何在 2 个 React 组件之间切换状态 [重复]答案

【问题标题】：How to toggle state between 2 React components [duplicate]如何在 2 个 React 组件之间切换状态 [重复]
【发布时间】：2021-12-20 05:03:06
【问题描述】：

我有一个组件（它呈现一个列表元素）。单击该组件中的状态isActive 时，将设置为true。但我希望将其他组件 isActive 状态设置为 false。但我似乎无法弄清楚在与组件交互时如何设置不同组件的状态。

https://codesandbox.io/s/eloquent-elbakyan-5powe?file=/src/App.tsx

export const ListElement = () => {
  const [isActive, setIsActive] = React.useState(false)
  const handleClick = () => {
    setIsActive(!isActive)
  }
  return (
    <li
      onClick={handleClick}
      className={isActive ? 'active' : ''}
    >
      toggle between these elements
    </li>
  )
}

【问题讨论】：

将状态传达给共同的父母/祖先，后者反过来设置相关孩子/后代的状态。这在许多教程中都有概述，甚至反应文档本身react-cn.github.io/react/tips/…
这能回答你的问题吗？ ReactJS Two components communicating 和 reactjs.org/docs/lifting-state-up.html
我想过，但是如果我将一个 prop 传递给父元素（例如 UL 组件）并将所有子组件（列表元素）设置为 false。它还会将点击的元素设置为 false。
不确定你的意思，每个子元素都有一个 ID，当你得到一个事件说一个子项变为活动时，你将所有其他子项设置为非活动。您的列表项需要有一个输入道具将其设置为非活动状态，并需要一个回调以使其父项知道它已更改。肮脏的方法是将它们全部设置为非活动状态，然后将发送事件的顶部设置为活动状态。

标签： reactjs

【解决方案1】：

一种解决方法是让父组件处于活动状态，然后将一些函数和数据传递给子组件，以处理您想要的内容

Sandbox

//Parent

import { useState } from "react";

export default function App() {
  const [activeId, setActiveId] = useState();
  const [lists] = useState([0, 1, 2, 3]);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <ul>
        {lists.map((list, id) => (
          <ListElement
            id={id}
            key={id}
            isActive={id === activeId}
            toggle={setActiveId}
          />
        ))}
      </ul>
    </div>
  );
}

//ListElement

export const ListElement = ({toggle,isActive,id}) => {
  return (
    <li
      onClick={()=>toggle(id)}
      className={isActive ? 'active' : ''}
    >
      toggle between these elements
    </li>
  )
}

【讨论】：

哦，是的，您可以在所有列表元素之间传递 ListElement id 作为标识符。聪明的。谢谢
@PeterBoomsma 我不是已经说过每个项目都应该有一个可以在我的评论中传递的 ID 吗？ Tiko：我们真的不需要 StackOverflow 上的另一个答案，第 100 万次回答同一个问题......尽管我们想帮助发帖者，但有很多答案可以详细解释这一点