React之使用context传递数据

前端之家收集整理的这篇文章主要介绍了React之使用context传递数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

与props只能逐级传递数据相比,使用context可以实现跨级传递数据。
下面通过一个demo来展示context传递数据的实现:

//父组件,最上层的组件
import React,{ Component,PropTypes } from 'react';
import Son from './Son';

@H_403_11@class App @H_403_11@extends Component {

  getChildContext() {
      @H_403_11@return {test: "hello"};
  }

  render() {
      @H_403_11@return (
          <@H_403_11@div className="App" style={{border:'1px solid red',width:'30%',margin:'50px auto',textAlign:'center'}}>
              <p style={{padding:'0',margin:'0'}}>父组件</p>
              <Son/>
          </@H_403_11@div>
      );
  }
}

App.childContextTypes = {
    test: PropTypes.string
};

export @H_403_11@default App;
//子组件
import React,PropTypes } from 'react';
import Grandson from './Grandson';

@H_403_11@class App @H_403_11@extends Component {
    render() {
        console.log('this.context',@H_403_11@this.context);

        @H_403_11@return (
            <@H_403_11@div className="son" style={{border:'1px solid blue',width:'60%',textAlign:'center'}}>
                <p>子组件,获取父组件的值:{@H_403_11@this.context.test}</p>
                <Grandson/>
            </@H_403_11@div>
        );
    }
}
App.contextTypes = {
    test: PropTypes.string
};
export @H_403_11@default App;
//孙组件
import React,PropTypes } from 'react';
@H_403_11@class App @H_403_11@extends Component {
    render() {
        console.log('this.context:',@H_403_11@this.context);
        @H_403_11@return (
            <@H_403_11@div className="son" style={{border:'1px solid green',textAlign:'center'}}>
                <p>孙组件,获取传递下来的值:{@H_403_11@this.context.test}</p>
            </@H_403_11@div>
        );
    }
}
App.contextTypes = {
    test: PropTypes.string
};
export @H_403_11@default App;

最终实现效果如下图

猜你在找的React相关文章