剧场模式
首页React 进阶提高 - 技巧篇

React 进阶提高 #20 React 16.3 全新的 Context API

下载发布于796 次观看
0

https://www.rails365.net/movies/react-jin-jie-ti-gao-7-context-shang-xia-wen

https://www.rails365.net/movies/react-jin-jie-ti-gao-18-sheng-ji-16-3

import React, { Component } from 'react';
import './App.css';

// 第一步,创建 context
const myContext = React.createContext()

// 第二步,创建 Provider Component

class MyProvider extends Component {
  state = {
    name: "rails365",
    age: 27
  }

  render() {
    return (
      <myContext.Provider value={{ state: this.state }}>
        { this.props.children }
      </myContext.Provider>
    )
  }
}

const Family = (props) => {
  return (
    <div>
      <h1>Family</h1>
      <Person />
    </div>
  )
}


class Person extends Component {
  render() {
    return (
      <div>
        <h1>Person</h1>
        <myContext.Consumer>
          { ({ state }) => <p>My age is { state.age }</p> }
        </myContext.Consumer>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <p>Hello App</p>
        <MyProvider>
          <Family />
        </MyProvider>
      </div>
    );
  }
}

export default App;
0 条评论
暂无评论~~
扫码打赏 16.8 元起加我微信拉入微信群

加我微信:15014006126

打赏的朋友或 Pro 学员获得特权

  • 加我微信拉你进微信群,享有更多互动和人脉资源;

  • 网站固定数量代金券,用于购买收费课程;

  • 和 10 年程序员老兵我成为微信好友;

  • 不定期技术分享和视频问题解答

友情提示
热门播放列表 love