Как получить доступ к состоянию, когда я нахожусь в другом компоненте?

Question

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

import React, {
  Component
} from 'react';
import ContentCards from './ContentCards.js';
import $ from 'jquery';

export class SearchBar extends React.Component {
  constructor(props) 
  {
    super(props);
    this.state = {}
  }

  search(userSearch) 
  {
    console.log('search in action');
    const urlSearch = 'https://api.themoviedb.org/3/search/multi?api_key=16667866c29ba1bc29e687b4892b8d5c&language=en-US&page=1&include_adult=false&query=' + userSearch
    $.ajax({
      url: urlSearch,
      success: (searchs) => {
        console.log('Fetched data succesfully');
        const results = searchs.results;
        var contentSearched = [];

        results.forEach(content => {
          console.log(content);

          content.poster_src = 'https://image.tmdb.org/t/p/w185' + content.poster_path;
          const contents = < ContentCards key = {
            content.id
          }
          content = {
            content
          }
          />
          contentSearched.push(contents);
        });
        this.setState({
          allContent: contentSearched
        });
      },
      error: (xhr, status, err) => {
        console.error('Failed to fetch data');
      }
    });
  }

  searchChangeHandler(event) {
    const userSearch = event.target.value;
    this.search(userSearch);
  }

  render() {
    return ( <
      div className = "navbar-end" >
      <
      div className = "control has-icons-left has-icons-right" >
      <
      input className = "input"
      onChange = {
        this.searchChangeHandler.bind(this)
      }
      placeholder = "search ..." / >
      <
      span className = "icon is-small is-right" >
      <
      i className = "fas fa-search" > < /i> <
      /span> <
      /div> <
      /div>
    );
  }
}

Предполагается, что компонент Root может получить доступ к состоянию allContent, но мне это не удается.Функция allContent позволяет сохранять все данные, которые вы используете, например, если пользователь ищет фильм аватара, будет показана таблица, относящаяся ко всему содержимому аватара.

import React from 'react';
import {NavBar} from './NavBar';

export class Root extends React.Component{
   render(){
      return(
        <div className='container'>
        <div><NavBar/></div>
        <hr/>
        {this.props.allContent}
       </div>
   );
}
}

Answer 1

Извините, я неправильно понял ваш вопрос в первый раз.

Вы хотите, чтобы родитель мог получить доступ к дочернему состоянию, верно?

Вы бы хотели, чтобы состояние ребенка определялось в корнеи передал как реквизит.Что-то в этом роде

class Child extends React.Component
{
  constructor
  {
    this.state = this.props.passedState || {};
    this.upDateState = this.upDateState.bind(this);
  }
  
  updateState(newState)
  {
    //Updates the state of parent, adding child state
    this.props.passToParent(newState);
  }
  
  render()
  {
    return('some stuff')
  }
}

class Parent extends React.Component
{
  constructor()
  {
    this.state = {
      childState : {}.
    }
    this.passToChild = this.passToChild.bind(this);
  }
  
  passToChild(newChildState)
  {
    let currentState = {...this.state};
    currentState.childState = newChildState;
    return this.setState(currentState);
  }
  
  render()
  {
    return(
      <Child
        passState={this.state.childState},
        passToParrent={this.passToChild}
      />
    )
  }
}