[cc lang=”js”]
//后代组件中的组件放在Consumer里面, 内部是一个函数, 这个函数接受一个对象作为参数,
参数是Provider里面提供的值. 然后直接使用就可以了
export default class List extends React.Component{
render() {
const { list } = this.props
return (
{
({ deleteTask }) => {
return list.map((item, index) => {
return (
- { item }
)
})
}
}
);
}
}[/cc]
import React from 'react'
const { Consumer, Provider } = React.createContext();
/ /父(祖先)级组件中, 把要传递东西的后代组件包起来, 要传递的东西放进value里面
function rootComponent(){
render() {
return (
<input type="text" />
<button> Add </button>
);
}
}
//后代组件中的组件放在Consumer里面, 内部是一个函数, 这个函数接受一个对象作为参数,
参数是Provider里面提供的值. 然后直接使用就可以了
export default class List extends React.Component{
render() {
const { list } = this.props
return (
{
({ deleteTask }) => {
return list.map((item, index) => {
return (
<ul>
<li>{ item }
<button>{deleteTask(index)}}> delete </button>
</li>
</ul>
)
})
}
}
);
}
}
新的Context有一个明显实用好处，可以很清晰地让多个Context交叉使用，比如组件树上可以有两个Context Provider，而Consumer总是可以区分开哪个context是哪个。
{ context1 => (
{ context2 => {
// 在这里可以通过代码选择从context1或者context2中获取数据
return ...;
}
}
)
}
context Api 16.3 以前用法
[cc lang=”js”]
class ThemeProvider extends React.Component {
state = {
theme: defaultTheme
}
static childContextTypes = {
theme: PropTypes.object
}
getChildContext() {
return this.state;
// return this.props.theme 返回 provider 组件属性的theme
}
}
//每当ThemeProvider被渲染的时候，它的getChildContext就会被调用，返回值就是它所提供的context
[/cc]
[cc lang=”js”]
const Banner = ({}, context) => {
return (
);
};
Banner.contextTypes = {
theme: PropTypes.object
}[/cc]