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

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

下载hfpp2012发布于React1228 次点击播放时长:06:50
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

加 QQ 群:697272886

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

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

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

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

相似的视频
React 进阶提高 #21 React 16.3 全新的 Context API - 实践

React 进阶提高 #21 React 16.3 全新的 Context API - 实践

Pro播放时长:09:19

1089 次点击

React 进阶提高 #18 升级到 16.3

React 进阶提高 #18 升级到 16.3

免费播放时长:02:37

1113 次点击

React 进阶提高 #5 无状态组件的最佳写法

React 进阶提高 #5 无状态组件的最佳写法

Pro播放时长:04:52

841 次点击

React 进阶提高 #7 context(上下文)

React 进阶提高 #7 context(上下文)

免费播放时长:03:58

1528 次点击

© Rails365 | 隐私条款 | 服务条款 | 加盟本站 | 粤ICP备15004902号 | 在线学员:16

Top