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

Question

我有带有 header 组件的主组件，我如何访问主组件中的 header 状态，这里是示例

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;

我需要在 Home 组件中使用 Header 的状态，可以吗？

这种方式对性能有好处吗？ 谢谢

Answer 1

您需要使用state lifting .

定义一个方法，例如Header 组件中的 liftTheState 将通过使用所需数据调用 Home 组件方法来提升 Header 组件的状态。

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

  liftTheState=()=>{

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

在家里:

定义一个方法，例如Home 组件中的 callHomeMethod 将保存 Header 组件数据并将方法作为 prop 传递给 Header 组件

class App extends Component {

    callHomeMethod = (someDataFromHeader)=>{


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