Reaction learning path, data transfer (props,context);

Before we talk about the props sub-parent, we first learn about context, a very NB data receiving container, how to use it correctly, and then we will introduce it to you.

Before using it, we have to know something called prop-types, which means that we define data types from English, and its real function is to detect the types of variables; it mainly detects the types of variables in prop; prop is also a third-party class component library; next we will learn how to do it. The use of context, a super NB data container, may be a bit complicated, but it works well.

The low version of props-types is directly invoked in react, while the high version requires an additional package of props-types.

A context: The first step is to load and install the prop-type dependency (a list of Web packages packaged) cnpm install prop-types for installation.

After successful installation, how to use it is the next step, divided into the following steps:

1. Define in the first component (index.jsx). (How to use the component, I explained in the last section, this section is not nonsense.)

Introduce the prop-types package first

import PropTypes from 'prop-types'

Class class defines the passed data and defines the data through the getChildContext () function.

class Index extends Component{
	constructor() {}
 
getChildContext(){//Setting context data
  return {'text':'this.state.text'}
}
render(){
    
    return(
          <div>
            <Hello ></Hello>{//Define subcomponent calls

            }
          </div>
    )
  }
}
Index.childContextTypes = {//The type of data detected is passed to the next level
  text:PropTypes.string
}

childContextTypes must be set up, not set in the lower components can not obtain data, this is a must;

Failure to set will report such an error: Index.getChildContext(): childContextTypes must be defined in order to use getChildContext().

In Sun Tzu Component (son.jsx):

import PropTypes from 'prop-types'//Need to introduce package

 class Son extends Component{
 	constructor(props,context){

 		super(props)
 		console.log(context);


 	}
  render(){
    return(
      <div className="hello">
          //I am a grandchild component!
          {this.context.text}
          	
      </div>

    )
  }
}
Son.contextTypes = {
  text:PropTypes.string
}

Note: contextTypes must be set or data cannot be retrieved; pay attention to capitalization; generally OK! Through this undefined number of sub-components, the grandchildren can use to obtain data; the data in context can be changed, not just read; the upper level can change its data, but the data changed by the sub-level can not be displayed in view, can change, to display in view, must through some means; The upper level passes a method or function and calls changes at the sublevel.

2. The parent changes the child data; see the code:

Upper level changes sublevel code: index.jsx

class Index extends Component{
	constructor() {
    super()
    this.state={
      text:24
    }
  }
 
getChildContext(){//Setting context data
  return {'text':this.state.text}
}
add(){
  this.setState({
       text:this.state.text+1
  })
}
render(){
    
    return(
          <div>
            <Hello ></Hello>{//Define component calls

            }
            <input type="button" name='button'  value='Point me' onClick={this.add.bind(this)} />
          </div>
    )
  }
}
Index.childContextTypes = {//The type of data detected is passed to the next level
  text:PropTypes.number
}

Each sub-level: (son.jsx (grandchild component)

onstructor(props,context){

 		super(props,context)
 		//console.log(context.text)
 		console.log(this.context.text);


 	}
  render(){
    return(
      <div className="hello">
          //I am a grandchild component!
          {this.context.text}
          {this.context.text}
          	
      </div>

    )
  }
}
Son.contextTypes = {
  text:PropTypes.number
}

3. By passing a function method, the data of the parent component is changed in the child component:

Ancestor-level approach (index.jsx)

class Index extends Component{
	constructor() {
    super()
    this.state={
      text:24
    }
  }
 
getChildContext(){//Setting context data
  return {
    'text':this.state.text,
     addNum:this.add.bind(this)//Transfer function or method
   }
}
add(){
  this.setState({
       text:this.state.text+1
  })
}
render(){
    
    return(
          <div>
            <Hello ></Hello>{//Define component calls

            }
            <input type="button" name='button'  value='Point me' onClick={()=>{this.setState({text:this.state.text+1})}} />
           <p> {this.state.text}</p>
          </div>
    )
  }
}
Index.childContextTypes = {//The type of data detected is passed to the next level
  text:PropTypes.number,
  addNum:PropTypes.func
}

Sun Tzu Level (son.jsx) components:

class Son extends Component{
 	constructor(props,context){

 		super(props,context)
 		//console.log(context.text)
 		console.log(this.context);


 	}
  render(){
    return(
      <div className="hello">
          //I am a grandchild component!
          <input type="button" name='button'  onClick={this.context.addNum.bind(this)} value='I am a grandchild component' />
          <p>{this.context.text}</p>
                	
      </div>

    )
  }
}
Son.contextTypes = {
  text:PropTypes.number,
  addNum:PropTypes.func
}

Summary: When context transfers data, prop-types must be introduced at both child and parent levels. In the first parent level, getChildContext function and child ContextTypes attribute must be introduced. In other sub-levels, contextTypes attribute must be used to transfer data successfully; otherwise, contexts data cannot be transferred.

Next, we will introduce the data transfer of props, the parent component that returns the child data: