Question

我有带有标题组件的home组件如何访问home组件中的标头状态这里是示例

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。

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

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

  liftTheState=()=>{

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

在家：

定义一个方法，例如callHomeMethod组件中的Home，其中包含Header组件数据并将该方法作为道具传递给Header组件

class App extends Component {

    callHomeMethod = (someDataFromHeader)=>{


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

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

1 个答案: