react context传值和接收传值

一、创建 context.js文件。

import React from 'react';

const cmt = React.createContext('dark');
export {
  cmt
}

 

二、在CmtList父组件 通过 context 传参。

     1. 引入新建的 context.js文件。

     2. 使用 context下面的属性 Provider 提供传参。

import React from 'react';
import ComItem from './cmtItem'
import { cmt } from '../context/context.js'

export default class CmtList extends React.Component {
  render() {
    return (
      <div>
        <cmt.Provider value="这是父组件通过context传过来的数据。">
          <ComItem></ComItem>
        </cmt.Provider>
      </div>
    )
  }
}

 

三、在子组件里面接收 context 传参。

     1. 引入新建的 context.js文件。

     2. 使用 context下面的属性 Consumer 接收传参。

import React from 'react';
import { cmt } from '../context/context.js';

export default class CmtItem extends React.Component {
  render() {
    return (
      <div>
        {/* 注意： 接收传参的时候通过一个 function 去接收。 */}
        <cmt.Consumer>{value => value}</cmt.Consumer>
      </div>
    )
  }
}