在带有钩子的兄弟组件之间反应传递道具

Question

我是 React 的新手，正在使用 REST 创建小型应用程序 Api 来练习一下！因此，当我单击 pokeBox 时，sider 中必须显示有关所选神奇宝贝的详细信息。我附上截图，现在的样子。

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

包装器（父组件）；

1.1。精灵宝可梦列表 (Children);

1.1.1 GridCards（Children of PokemonsList）

1.2。关于 (Children)

所以，我必须从 GridCards 获取 pokemon.url 以及我如何理解，保存在父组件中。但是，功能组件怎么样？

Answer 1

我建议你在父组件中放置一段状态，你可以将它传递给关于组件（这里你将保存你想要显示的口袋妖怪的数据）。然后创建一个函数，将数据设置为您刚刚创建的状态，并将其传递给 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 });

Answer 2

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

const [selectedPokemon, setSelectedPokemon] = useState()

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

这样，你只需要将selectedPokemon传递给子组件About，你就可以根据selectedPokemon的值渲染你想要的东西

在带有钩子的兄弟组件之间反应传递道具

React pass props between sibling components with hooks

reactjs

react-props

react-hooks