react中关于Context/Provider/Consumer传参的使用_React_

//创建一个Context  //light就是传入的默认值 最好传入默认值因为第一次渲染的时候没有默认值可能会导致错误 const ThemeContext = React.createContext('light'); class App extends React.Component {   render() {     return (         //使用Provider设置dark值                            ); } //中间组件 function Toolbar(props) {   return (     
            
   ); } class ThemedButton extends React.Component { //注册context自动获取当前组件最近的Provider,获取到context的值 ,这种写法是不直接指定context的写法 //可以为类上的 contextType 属性分配由 React.createContext() 创建的 Context 对象。 这允许您使用this.context 使用该 Context 类型 的最近的当前值。   static contextType = ThemeContext;   render() {     return ;   } }

... class ThemedButton extends React.Component {  //使用Consumer,获取某个Context的值   render() {        return (                  {theme =>}            )   } }

//创建一个Context  //light就是传入的默认值 最好传入默认值因为第一次渲染的时候没有默认值可能会导致错误 const ThemeContext = React.createContext({theme: 'light',toggle: ()=> {}}); class App extends React.Component {   constructor(props) {     super(props);     this.toggle = () => { //设定toggle方法，会作为context参数传递       this.setState(state => ({         theme:           state.theme === themes.dark             ? themes.light             : themes.dark,       }));     };     this.state = {       theme: themes.light,       toggle: this.toggle,     };   }   render() {     return (                                    ); } //中间组件 function Toolbar(props) {   return (     
            
   ); } class ThemedButton extends React.Component {  //使用Consumer,获取某个Context的值   render() {        return (                  {theme =>}            )   } }

class Parent extends React.Component { state={ num:555, color:'green' } render() { return ( 
第1层
第1层 ) } } class Css extends React.Component { render() { return ( 
第2层
第2层
 ) } } class Js extends React.Component { render() { return ( 
第3层
第3层
 ) } } class Html extends React.Component { render() { return ( 
第4层
{data=>呼伦贝尔的颜色是{data}}
第4层
 ) } }