剧场模式
首页前端ReactReact 进阶提高 - 技巧篇 - 第 1 季

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

求知小风 · 元婴发布于
7

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

const Topic = (props) => {
  return (
    <div>
      <Comment />
    </div>
  )
}

const Comment = (props, context) => {
  return (
    <div>{ context.color }</div>
  )
}

Comment.contextTypes = {
  color: PropTypes.string
}

class App extends Component {
  getChildContext() {
    return { color: "red" };
  }
  render() {
    return (
      <div className="App">
        <Topic />
      </div>
    );
  }
}

App.childContextTypes = {
  color: PropTypes.string
}

export default App;
6 条回复
  • winixi · 金仙
    winixi · 金仙 #1

    getChildContext() {
    return { color: "red" };
    }
    这个是固定的接口实现吗?是框架里调用的吗?

  • 求知小风 · 元婴

    getChildContext 这个方法是 react 固定的 api 接口,里面 return 的内容是你自定义的。

  • winixi · 金仙
    winixi · 金仙 #3

    那如果要用上下文就必须实现这个getChildContext(),把需要传输的数据放进这个里面。如果子组件要修改这个上下文的对象体怎么操作?

  • 求知小风 · 元婴

    这些数据都是共享的,为何要修改呢,api 没提到如何修改的需求。比如你一个 props 传给子组件,没说要如何修改吧,修改的东西是 state 的值,这些数据又不是 state 的内容。

  • zsh19950920 · 真仙
    zsh19950920 · 真仙 #5

    老师 类组件怎么接收 context这个参数呢

  • 求知小风 · 元婴

    从这里取,你试下

加讲师微信(qiuzhi99pro)官方服务号
课程目录

1Freereact 技巧 #1 如何用 netlify 云服务部署 react 应用

2Freereact 技巧 #2 把 react 应用部署到 GitHub Pages

3Freereact 技巧 #3 react-router 教程 part 1

4Freereact 技巧 #4 react-router 教程 part 2

5ProReact 进阶提高 #5 React.PureComponent

6ProReact 进阶提高 #6 Fragment

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

8ProReact 进阶提高 #8 高阶组件

9ProReact 进阶提高 #9 强大酷炫好玩的 web IDE 工具(鼠标点击生成代码,缩减 N 倍开发时间)

10FreeReact 进阶提高 #10 用高阶组件来重构代码

11ProReact 进阶提高 #11 我最爱的 React 库 - 功能强大的可插入组件 (简化代码)

12ProReact 进阶提高 #12 返回多个组件的正确方式

13FreeReact 进阶提高 #13 netlifyctl 一键部署前端应用

14FreeReact 进阶提高 #14 defaultProps 和 类型检查 PropTypes part 1

15ProReact 进阶提高 #15 类型检查 PropTypes part 2

16ProReact 进阶提高 #16 用 Render Props 代替 HOC(高阶组件)

17ProReact 进阶提高 #17 错误边界和生命周期函数 componentDidCatch

18FreeReact 进阶提高 #18 升级到 16.3

19FreeReact 进阶提高 #19 探索 bind (this) 的写法

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

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

22ProReact 进阶提高 #22 从 Redux 迁移到 React 16.3 的 Context API 之实践

23ProReact 进阶提高 #23 对象,数组,可变数据

24ProReact 进阶提高 #24 React.Children API 和 props.children 讲解

25ProReact 进阶提高 #25 如何使用 styled-components

26ProReact 进阶提高 #26 如何使用 styled-components(实践篇)

27ProReact 进阶提高 #27 你应该使用 redux-form(介绍)

28ProReact 进阶提高 #28 你应该使用 redux-form(实践篇)

29ProReact 进阶提高 #29 React Portals(学习方法)

30ProReact 进阶提高 #30 使用 React Portals 实现 Modal 框(part 1)

31ProReact 进阶提高 #31 使用 React Portals 实现 Modal 框(part 2)

32ProReact 进阶提高 #32 使用 React Portals 实现 Modal 框(part 3)

33ProReact 进阶提高 #33 使用 React Portals 实现 Modal 框(part 4)

学员(138)
Web · 太乙JesusCracker · 道祖风林火山 · 练虚温文尔雅 · 道祖娜娜 · 道祖smile · 道祖k344730721 · 元婴教主 · 大乘Luminous🌈 · 金仙ahatom · 练虚o欧洋 · 道祖氕氘氚 · 道祖
最新动态
Web · 太乙学习到了4:05
JesusCracker · 道祖学习到了4:21
风林火山 · 练虚学习到了2:06
温文尔雅 · 道祖学习到了4:34
娜娜 · 道祖学习到了4:32
统计信息
    学员: 19251
    视频数量: 1175
    帖子数量: 430

© 汕尾市求知科技有限公司 | 关注我们 | 在线学员:120

粤公网安备 44152102000088号 | 粤ICP备19038915号

Top