跨组件通信的使用 Context应用场景

方法一：通过父传子，一步一步向子组件传递数据

爷爷组件

class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
      nickname:'kobo',
      level:99
    }
  }
  render() {
    const {nickname,level} = this.state
    return (
      <div>
        <Profile nickname={nickname} level={level}/>   //子组件
      </div>
    )
  }
}
export default App;

父组件

export default class Profile extends Component {
    render() {
        const {nickname,level} = this.props
        return (
            <div>
                <ProfileHeader nickname={nickname} level={level}/>//子组件
                <h2>我是Profile组件</h2>
                <ul>
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                    <li>444</li>
                </ul>
            </div>
        )
    }
}

子组件

export default class ProfileHeader extends Component {
    render() {
        const {nickname,level} = this.props
        return (
            <div>
                <h2>我是ProfileHeader组件</h2>
                <span>我的昵称：{nickname}</span>
                <span>我的等级：{level}</span>
            </div>
        )
    }
}

以上操作就可以拿到爷爷组件定义的数据

 

方法二：Context API