如何在 React 中将属性从一个组件传递到另一个组件答案

【问题标题】：How do I pass the properties from one component to another in React如何在 React 中将属性从一个组件传递到另一个组件
【发布时间】：2021-08-11 09:32:08
【问题描述】：

我正在使用 pokeapi 制作一个 pokedex 应用程序。我似乎无法弄清楚如何将我的数据从我的口袋妖怪列表传递到我的单个口袋妖怪页面。

基本上我想要做的是，当我从列表中单击单个 pokemon 时，我希望它呈现单个 pokemon 数据组件并将单击的 pokemon 的数据传输到该组件。

我正在使用 react-router-dom

这是我的 app.js，我在其中映射存储在 state 中的所有 pokemon，并返回 pokemon 列表组件，其中包含 state 中每个项目的 name prop

这是我的 pokemonlist.js

这是我的单个口袋妖怪数据组件，我希望将点击的口袋妖怪的数据传输到该组件

【问题讨论】：

标签： reactjs components react-props

【解决方案1】：

我会怎么做：

在您的路由器中，您需要有 2 条路线（所以 2 个组件）：1 条显示所有宠物小精灵，1 条显示一只宠物小精灵，

对于单个 pokemon 路由，您可以使用 react-router-dom 的参数仅显示 URL 中作为 id 的 pokemon（您需要为每个 pokemon 使用唯一的属性，例如 id）

应该是这样的：

function Router() {
  return (
    <Switch>
      <Route path="/pokemons" exact component={Pokemons} />
      <Route path="/pokemon/:id" exact component={Pokemon} />
    </Switch>

所有口袋妖怪组件 (# example : http://localhost:3000/pokemons (显示所有的精灵)

import { Link } from "react-router-dom";

function Pokemons() {
  useEffect(() => {
    getPokemons();
  }, []);

  return (
    <>
      {allPokemons.map(pokemon => (
        <Link to={`/pokemon/${pokemon.id}`}>{pokemon.name}</Link>
      ))}
    </>

单个口袋妖怪组件 (# example : http://localhost:3000/pokemon/150 (显示 id 为 150 的 pokemon)

import { useParams } from "react-router-dom";

function Pokemon() {
  let { id } = useParams();

  useEffect(() => {
    getPokemon(id);
  }, []);

  return (
    <>
      {pokemon.name}
    </>

【讨论】：