Установка состояния на уровне корня из компонента глубиной 2 слоя

Question

Новичок в React, поэтому с этим сложно бороться.

Я хочу изменить список на основе выбранной категории, однако компонент Категории вызывается компонентом Listing, который вызывается компонентом App.

-App.js
 -Listing.js
  -Categories.js

Я изначально устанавливаю состояние selectedCategory в файле app.js, и оно работает как положено, однако я хочу обновить это состояние.Я могу обновить состояние в компоненте категорий, но это только обновляет состояние элемента <Category>.Я хочу обновить состояние «глобально», чтобы иметь к нему доступ везде.

Вот компонент Categories.js:

import React, { Component } from 'react';

class Categories extends Component {


handleCategoryClick = (id, e) => {
    console.log(id);

    this.setState({ selectedCategory:id });

}

render() {

return (
    <div className="tour-categories">

        <ul className="tour-categories-list">
            <li onClick={(e) => this.handleCategoryClick(1, e)}>Food &amp; Drink</li>
            <li onClick={(e) => this.handleCategoryClick(2, e)}>Whisky Distilleries</li>
            <li onClick={(e) => this.handleCategoryClick(3, e)}>TV &amp; Film Location</li>
            <li onClick={(e) => this.handleCategoryClick(4, e)}>City Tour</li>
            <li onClick={(e) => this.handleCategoryClick(5, e)}>Castles</li>
            <li onClick={(e) => this.handleCategoryClick(6, e)}>Golf </li>
            <li onClick={(e) => this.handleCategoryClick(7, e)}>Shopping</li>
            <li onClick={(e) => this.handleCategoryClick(8, e)}>Out Door Activities</li>
            <li onClick={(e) => this.handleCategoryClick(9, e)}>Spa &amp; Wellness</li>
            <li onClick={(e) => this.handleCategoryClick(10, e)}>Boat Tours &amp; Water Sports</li>
            <li onClick={(e) => this.handleCategoryClick(11, e)}>Zoo &amp; Aquariums</li>
        </ul>

    </div>
)
}
}

export default Categories;

Компонент Listing.js:

import React, { Component } from 'react';
import Categories from './Categories.js';

class Listing extends Component {

render() {

return (
    <div>

        <Categories />

    </div>
)
}
}

export default Listing;

И компонент App.js (соответствующая часть)

class App extends Component {

state = {
 tours: {},
 selectedCategory: ""
};

loadData() {
fetch(API)
  .then(response => response.json())
  .then(json => {
      console.log(json);
      this.setState({
        tours: json
    });
  })

}

 componentDidMount() {

 this.loadData();

}


render() {
 return (

    <div className="tour-container">

      <Listing />

     </div>
    );
  }
}

export default App;

Спасибо.

Answer 1

вам нужно передать его вашему дочернему компоненту

также в категории

, в которой вы определяете данные обновления функции обратного вызова, затем они передаются в список, а затем в приложение, так что приложение, к которому мы можем получить доступ какреквизит, так что должно функционировать

Answer 2

Вам нужно пропустить выбранную категорию через реквизит

Что-то подобное в приложении:

<Listing selected={this.state.selectedCategory} />

Затем в вашем листинге передать его в вашу категорию

<Category selected={this.state.selectedCategory} />

Доступ к нему с помощью this.props.selectedCategory внутри категории (или списка)

Если вам необходимо обновить его из категории ->

<Category selected={this.state.selectedCategory} onUpdate={this._handleUpdate} />

И для обработки изменений:

function _handleUpdate(updatedValue){
  this.props.onUpdate(updatedValue);
}

И сделать то же самое в Листинге, чтобы вернуться в приложение.

Обновить состояние в приложении, когда onUpdate из Листинга.

И все готово!;)

Документы: https://reactjs.org/docs/components-and-props.html

Некоторые пояснения по встроенным функциям: https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578