如何访问另一个组件的状态

Question

I have home component with header component how may I access the header states in home component here is the example

Header.JS

class Header extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            pageNumber: 1
        }
    }
  render() {
    return (
      <div className="shopping-list">
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

Home.js

import React, {Component} from 'react';
import Header from './header';

class App extends Component {

    render() {
        return (
            <div>
             <Header /> // I need to use the states of Header in this component
            </div>
        )
    }
}

export default App;

I need to use the states of Header in Home component, is that possible?

Does this way is good for performance? Thank you

Answer 1

You need to use state lifting .

Define a method eg liftTheState in Header component which will lift the state of Header component by calling Home component method with required data.

class Header extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            pageNumber: 1
        }
    }

  liftTheState=()=>{

      this.props.callHomeMethod(this.state.pageNumber);
  }
  render() {
    //...
  }
}

In Home :

Define a method eg callHomeMethod in Home component which will hold the Header component data and passed the method as a prop to Header component

class App extends Component {

    callHomeMethod = (someDataFromHeader)=>{


    }
    render() {
        return (
            <div>
             <Header  callHomeMethod = {this.callHomeMethod}/> // pass Home method here used for state lifting.
            </div>
        )
    }
}