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

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

求知小风 · 真仙发布于
6

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;
4 条回复
  • winixi · 金仙
    winixi · 金仙 #1

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

  • 想卖咖啡的程序员 · 元婴

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

  • winixi · 金仙
    winixi · 金仙 #3

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

  • 想卖咖啡的程序员 · 元婴

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

加微信(qiuzhi99666)入群官方服务号
随机课程
React 进阶提高 - 技巧篇 -  第 3 季

React 进阶提高 - 技巧篇 - 第 3 季

0 个视频0 分钟中级

全部免费

React还未更新新课程

课程目录

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)

学员(98)
NullPointerException · 太乙迅捷斥候tony · 大乘shengwenzheng · 元婴ican · 大乘Hichank · 太乙穆博嘉 · 真仙hanruiying · 道祖liuboyu520 · 大乘骑龙 · 太乙xiaoxi · 真仙AphasiaPatient · 真仙highcker · 太乙
最新动态
NullPointerException · 太乙学习到了3:58
迅捷斥候tony · 大乘学习到了3:47
shengwenzheng · 元婴学习到了4:23
ican · 大乘学习到了4:26
Hichank · 太乙学习到了4:37
统计信息
    学员: 15263
    视频数量: 882
    帖子数量: 433

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:127

Top