Реактивные проходные элементы между одноуровневыми компонентами с помощью крючков

Question

Я новичок в React и создаю небольшое приложение с REST Api, чтобы немного попрактиковаться! Итак, когда я нажимаю на pokeBox, в сидре должна отображаться подробная информация о выбранном покемоне. Я прилагаю скриншот, как это выглядит сейчас.

Но я понятия не имею, как мне получить постоянную с Pokemon.url. Это моя структура:

1. Wrapper (Parrent Component);

   1.1. PokemonsList (Children);

   1.1.1 GridCards (Children of PokemonsList)

1.2. О (Дети)

Итак, я должен получить pokemon.url от GridCards и, как я понимаю, сохранить в компонент 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 });