Reactjs 使用挂钩在兄弟组件之间反应传球道具

我是一个新的反应和创建小应用程序与RESTAPI得到一些实践！所以，当我点击pokeBox时，in sider必须显示所选pokemon的详细信息。 我看到了屏幕截图，它现在的样子

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

包装器（部件）

1.1。口袋妖怪名单（儿童）

1.1.1网格卡（口袋妖怪列表的孩子）

1.2。关于（儿童）

所以，我必须从GridCards中获取pokemon.url，以及我如何理解、保存在parrent组件中。

---

但是，功能组件的情况如何？

我建议您在父组件中放置一段状态，您可以将其传递给about组件（这里您将保存要显示的口袋妖怪的数据）。然后创建一个函数，将数据设置为刚刚创建的状态，并将其传递给PokemonList组件，以便在单击pokemon的名称时调用该函数

在包装中：

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 });

---

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

const[selectedPokemon，setSelectedPokemon]=useState（）

当点击一个新的

pokeBox

时触发一个函数，在其中调用

setSelectedPokemon（pokemon.url）

---

这样，您只需将

selectedPokemon

传递给子组件

About

，在该组件中，您可以根据

selectedPokemon

值呈现所需内容。

如果我使用功能组件，这种拼写是否正确

const[SelectedPokemon，setSelectedPokemon]=useState（[]）；setSelectedPokemon=（pokemon）=>（[SelectedPokemon，pokemon]）

setPokemon=（pokemon）=>setSelectedPokemon（pokemon）；我如何传递

设置SelectedPokemon

？作为另一个道具？@ValeriySamoilov如果你的pokeBox容器是一个按钮，你可以这样写：

setSelectedPokemon（url）}/>

并且在子组件

Pokemon

中使用

props.onClickPoke（url）}>