如何将 child 的 prop 传递给另一个 child？（反应钩子）

Question

我需要从一个 child 组件向另一个组件传递一个道具（它是一个唯一 ID），但我做不到。

操作简单：首页是parent，直接有两个children：Gallery和Detail。使用地图的图库打印其 children 卡片，这些卡片具有唯一的 ID。我需要在单击卡片按钮时，该唯一 ID 可以由 Detail 接收。

我尝试通过 handleClick 来管理它，但由于我已经在那里管理了一个状态，所以我不知道是否可以从那里管理它或者是否有其他方法。

这是代码：

interface DetailProps {}

const Detail: React.FC<DetailProps> = (props) => {
  return (
    <div>
      <span className="tituloJuego">DENTRO DE DETAIL</span>
    </div>
  );
};

interface CardProps {
  id: number;
  image: string;
  title: string;
  price: string;
  onClick: (result: string) => void;
}

const Card: React.FC<CardProps> = (props) => {
  return (
    <div className="card">
      <img className="image" src={props.image} />

      <div className="card-info">
        <div className="containerTitlePrice">
          <span className="tituloJuego">{props.title}</span>
          <br></br>
          <span className="-USD">{props.price}</span>
        </div>

        <div className="containerButton">
          <button className="Rectangle" onClick={(event) => props.onClick("detail")}>
            <span className="Install-Game">BUY NOW</span>
          </button>
        </div>
      </div>
    </div>
  );
};

interface GalleryProps {
  onClick: (result: string) => void;
}

const Gallery: React.FC<GalleryProps> = (props) => {
  return (
    // Se recorren los datos de json con map y se imprime cada card
    <div className="container">
      {data.map((games, key) => {
        return (
          <Card
            id={games.id}
            image={games.image}
            title={games.title}
            price={games.price}
            onClick={(event) => props.onClick("detail")}
          />
        );
      })}
    </div>
  );
};

const Homepage: React.FC = () => {
  // Por defecto el estado muestra homepage
  const [currentView, setCurrentView] = React.useState<string>("homepage");
  const handleClick = () => setCurrentView("detail");

  const [currentClickedGame, setCurrentClickedGame] = React.useState<number>(0);

  return (
    <div className="Simplified-homepage">
      {currentView === "homepage" ? (
        <div className="store-gallery">
          <Gallery onClick={handleClick} />
        </div>
      ) : (
        <div className="">
          <Detail />
        </div>
      )}
    </div>
  );
};

// ========================================

ReactDOM.render(<Homepage />, document.getElementById("root"));

这是 json 文件。此文件中的数据是我在卡片中显示的数据。 “ID”是我想从卡片传递给主页的号码：

JSON file

Answer 1

您可以在两个子组件中传递状态 currentClickedGame 以处理 ID。您不能在同一级别的组件上或从子组件到父组件传递道具，因为反应遵循单向数据流。此外，您可以在 Card 组件本身内部管理它，而不是从主页传递 handleClick 并设置 setCurrentView 从那里。我已经将道具钻到 2 个级别，考虑在更复杂的情况下使用 context

在HomePage中：

return (
    <div className="Simplified-homepage">
      {currentView === "homepage" ? (
        <div className="store-gallery">
          <Gallery setCurrentClickedGame ={setCurrentClickedGame}/>
        </div>
      ) : (
        <div className="">
          <Detail currentClickedGame={currentClickedGame}/>
        </div>
      )}
    </div>
  );

在图库组件中：

   return (
          <div key={games.id}>
            <Card
              id={games.id}
              image={games.image}
              title={games.title}
              price={games.price}
              setCurrentView={props.setCurrentView}
              setCurrentClickedGame={props.setCurrentClickedGame}
            />
          </div>
        );

View demo on Codesandbox

如何将 child 的 prop 传递给另一个 child？（反应钩子）

How to pass prop of a child to another child? (React Hooks)

typescript

reactjs

react-native

react-router-dom

react-hooks

如何将 child 的 prop 传递给另一个 child？ （反应钩子）

How to pass prop of a child to another child? (React Hooks)

typescript

reactjs

react-native

react-router-dom

react-hooks

如何将 child 的 prop 传递给另一个 child？（反应钩子）