React 之React.createContext
李联
Context方法的官方文档地址：https://react.docschina.org/docs/context.html#when-to-use-context
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。
话不多说，直接贴码！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<div id="example"></div>
<script type="text/babel">
const ThemeContext = React.createContext()
function Parent(props) {
return(
<div>
<Child></Child>
</div>
)
}
function Child(props) {
return(
<ThemeContext.Consumer>
{
myValue => {return (<h1>myValue : {myValue}</h1>)}
}
</ThemeContext.Consumer>
)
}
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state={
value: 60
}
}
componentDidMount(){
}
render() {
const {value} = this.state
return (
<ThemeContext.Provider value={value}>
<button
type="button"
onClick={() => this.setState({ value: value - 1 })}
>
减减
</button>
<Parent />
</ThemeContext.Provider>
)
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</script>
</html>使用方法：
首先引入createContext，然后创建Content
// 首先引入createContent
import React, { Component, createContext } from 'react';
// 然后创建Content
const ThemeContext = React.createContext()创建完毕之后，包裹在需要传值的组件外层，注意要使用创建的Context+‘.Provider’作为标签名，然后添加value属性，也就是实参，
孙组建取值，在需要获取的组建外层用创建的Context+‘.Consumer’作为标签名，然后在内部的{}中写方法，方法中的参数就是你的形参。
类似资料：