用钩子切换活动状态

Question

我正在使用React挂钩，并且遇到了不确定的操作。

我有一个渲染城市列表的父组件。

const Cities = ({ cities = ["London", "Barcelona", "Los Angeles", "New York"] }) => {
  return (
    <>
      {cities.map(city => {
        const [isActive, setActive] = useState(false);
        return <p onClick={() => setActive(true)} style={{ color: isActive ? "red" : "green" }}>{city}</p>;
      })}
    </>
  );
};

我遇到的问题是，每当我单击某个城市时，都会旋转一次red，但是在任何时候我都只希望一个红色（即最近一次单击的红色）。

如果对此问题有任何不清楚的地方，请告诉我。

在阶级成分，我想我可能会做类似的东西这个。

在此处查看代码沙箱。

Answer 1

如果一次只能选择一个城市，则不需要所有城市都具有州值。只需将当前选择的状态保持在单个状态属性中即可：

const Cities = ({ cities = ["London", "Barcelona", "Los Angeles", "New York", "Wigan"] }) => {
    const [activeCity, setCity] = useState(null);

    return (
        <>
            {cities.map(city => <p key={city} onClick={() => { setCity(city) }} style={{ color: activeCity === city ? "red" : "green" }}>{city}</p>)}
        </>
    );
};