react利用context向下传值简单案例

最新推荐文章于 2024-07-27 08:58:09 发布

前端kit

最新推荐文章于 2024-07-27 08:58:09 发布

阅读量467

点赞数

本文链接：https://blog.csdn.net/qq_20069429/article/details/81874394

版权

1.目录结构

react-context-demo    
    config
    node_modules
    public
    script
    src
        App.js
        Header.js
        Title.js
        index.js

2.index.js内容

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

3.App.js内容

import React,{Component} from 'react';
import PropTypes from 'prop-types';
import Header from './Header';

class App extends Component{
  static childContextTypes={    //context 内容的格式
    themeColor:PropTypes.string
  }
  constructor(props){
    super(props);
    this.state={
      themeColor:'red'
    }
  }
  getChildContext(){        //插入方法
    return{
      themeColor:this.state.themeColor
    }
  }
  render(){
    return(
      <div>
        <Header />
      </div>
    )
  }
}

export default App;

3.Header.js内容

import React,{Component} from 'react';
import Title from './Title';
class Header extends Component{

    render(){
        return(
            <Title />
        )
    }
}

export default Header;

4.Title.js内容

import React,{Component} from 'react';
import PropTypes from 'prop-types';
class Title extends Component{
    static contextTypes = {        //接受content的格式
        themeColor: PropTypes.string
    }
    render(){
        console.log("title",this);
        return(
            <h1 style={{ color: this.context.themeColor }}>React.js 小书标题</h1>
        )
    }
}

export default Title;