用钩子在同级组件之间反应传递道具

Question

我是React的新手，并使用REST Api创建了小型应用程序来进行练习！因此，当我单击到pokeBox时，sider中必须显示有关所选口袋妖怪的详细信息。 我附上屏幕截图，现在看起来是这样。

但是我不知道如何才能通过Pokemon.url保持不变。 这是我的结构：

1. 包装器（Parrent组件）；

   1.1。 PokemonsList（儿童）；

   1.1.1 GridCards（PokemonsList的子代）

1.2。关于（孩子）

因此，我必须从GridCards中获取pokemon.url以及我的理解方式，并保存在Parrent组件中。 但是，功能组件的情况如何？

Answer 1

使用挂钩可以在父组件中设置状态：

const [selectedPokemon, setSelectedPokemon] = useState()

并在单击新的pokeBox并单击以调用setSelectedPokemon(pokemon.url)时触发功能。

通过这种方式，您只需要将selectedPokemon传递到子组件About，即可在其中根据selectedPokemon值呈现所需的内容。

Answer 2

我建议您在父组件中放入一个状态，然后将其传递给about组件（此处将保存您要显示的神奇宝贝的数据）。然后，创建一个函数，将数据设置为刚刚创建的状态，并将其传递给PokemonList组件，以便在单击神奇宝贝的名称时可以调用该函数。

在包装器中：

this.state = {
    selectedPokemon: {} // Pass this state to about comp as props
}

// Pass this function to pokemonList comp as props
setPokemon = (pokemon) => this.setState({ selectedPokemon: pokemon });