Javascript React-如何在显示元素的同时将其他元素隐藏在React钩子中 import React，{useState}来自“React”； 从“/PlanetInfoCard”导入PlanetInfoCard； 接口平面TINFOSPROPS{ planetName：字符串； 平均温度：字符串； 距离太阳？：字符串； 半径：字符串； svg：字符串； 显示：布尔值； } const PlanetInfos:React.FC=({ 飞机名， svg， 离太阳的距离， 平均温度， 半径 显示， }) => { const[displayStatus，setDisplayStatus]=使用状态（isDisplayed）； 常量displayPlanetInfo=（）=>{ setDisplayStatus（！displayStatus）； }; 返回(

{planetName}

{显示状态&&( )} ); }; 导出默认PlanetInfos；

---

在这里，每个行星都在其数据对象中显示了值。我设法使用

useState

单独显示它们。但我想在展示的同时隐藏其他元素。我试图创建其他状态，但它变得凌乱，无法执行。

您可以有一个状态来决定显示哪个元素

比如：

[displayingItem，setDisplayingItem]=useState（其中一个PlanetName）

您可以通过
setDisplayinItem（planetName）

这样，每次只显示一个项目

import React, { useState } from "react";
import PlanetInfoCard from "./PlanetInfoCard";

interface PlanetInfosProps {
  planetName: string;
  averageTemperature: string;
  distanceFromSun?: string;
  radius: string;
  svg: string;
  isDisplayed: boolean;
}

const PlanetInfos: React.FC<PlanetInfosProps> = ({
  planetName,
  svg,
  distanceFromSun,
  averageTemperature,
  radius,
  isDisplayed,
}) => {
  const [displayStatus, setDisplayStatus] = useState(isDisplayed);

  const displayPlanetInfo = () => {
    setDisplayStatus(!displayStatus);
  };

  return (
    <div
      onClick={displayPlanetInfo}
      key={planetName}
      className="planet-list__infos"
    >
      <li>
        <img src={svg} alt="planet-logo" /> <p>{planetName}</p>
      </li>
      {displayStatus && (
        <PlanetInfoCard
          key={distanceFromSun}
          planetName={planetName}
          svg={svg}
          distanceFromSun={distanceFromSun}
          averageTemperature={averageTemperature}
          radius={radius}
          isDisplayed={isDisplayed}
        />
      )}
    </div>
  );
};

export default PlanetInfos;


{displayingItem===planetName&&(
)}
您应该在PlanetInfo列表所在的父组件中执行此操作

{displayingItem === planetName && (
        <PlanetInfoCard
          key={distanceFromSun}
          planetName={planetName}
          svg={svg}
          distanceFromSun={distanceFromSun}
          averageTemperature={averageTemperature}
          radius={radius}
          isDisplayed={isDisplayed}
        />
      )}


[displayedPlanet，setDisplayedPlanet]=useState（“”）；
常量setPlanet=（名称：字符串）=>{setDisplayedPlanet（名称）}
返回(
{listOfPlanets.map（（行星）=>
{planet.planetName==displayedPlanet&&}
)
好的，目标是只保留一个planetInfo作为选中的，因此，我们有显示的Planet状态，现在单击“只更新此状态”，在呈现plaentInfo列表时，只需检查当前状态是否等于列表中的planetInfo名称，如果是，则使用PlanetInfos组件呈现，单击事件在哪里？我不知道这到底是什么。其中一个行星名是什么？这怎么可能是一种状态呢？@İlker是像“地球”这样的行星名称之一，基本上是您希望默认显示的PlanetInfoCard的PlanetName。
   [displayedPlanet, setDisplayedPlanet] = useState('');
   const setPlanet = (name: string) => {setDisplayedPlanet(name)}

    return (
      <React.Fragment>
      {listOfPlanets.map((planet) => 
      <div onClick={setPlanet.bind(null, planet.planetName)}>
      {planet.planetName === displayedPlanet && <PlanetInfos planet=planet/>}</div>)}
     </React.Fragment>
)