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>
    )
  }
}