Parent and child components pass values

Parent component passes value to child component

• The parent component provides what to passThe state data
• Give child componentsAdd tag Attributes.valueisData in state
• Child component passpropsReceives data from the parent component

class P extends React.Component {
  state = {
    childv: 'Parent passes value to child'
  }
  render() {
    return (
      <div>
        <C childValue={this.state.childv} />
      </div>)}}class C extends React.Component {
  render() {
    return (
      <div>
        {this.props.childValue}
      </div>
    )
  }
}
ReactDOM.render(<P />.document.getElementById('root'))
Copy the code

Child components pass values to parent components

The general idea: using the callback function, the parent component provides the callback function, and the child component calls the data to be passed as arguments to the callback function

• The parent componentProvides a callback functionforReceive data
• Will thefunctionAs aAttribute valuesAnd passed to theChild components
• Child component passpropsReceive andCall the callback function
• SubcomponentdataAs aparameterPassed to theThe callback function

class P extends React.Component {
  getMessage = data= > {
    console.log('Parent component receives data', data)
  }
  render() {
    return (
      <div>
        <C getM={this.getMessage} />
      </div>)}}class C extends React.Component {
  state = {
    msg: 'Child passes data to parent'
  }
  handleMessage = () = > {
    this.props.getM(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleMessage}>Click on the</button>
      </div>
    )
  }
}
ReactDOM.render(<P />.document.getElementById('root'))
Copy the code

Sibling components pass values

The general idea: Promote state sharing to the nearest common parent, which manages state

• ascensionState of the public
• provideOperation Shared statethemethods

Click the button to count. Button for counting operation, numbers for display

• The shared state is: numbers

• To manipulate the shared state, click the button and proceed with the number +1

class P extends React.Component {
  // Share status
  state = {
    count: 0
  }
  // A method to manipulate the shared state
  add = () = > {
    this.setState({
      count: this.state.count + 1})}render() {
    return (
      <div>
        <C1 count={this.state.count} ></C1>
        <C2 add={this.add} ></C2>
      </div>)}}// Data display
const C1 = (props) = > {
  return (
    <div>{props.count}</div>)}// Logical operation
const C2 = (props) = > {
  return (
    <div>
      <button onClick={()= >{props. Add ()}}> I'm button +1</button>
    </div>
  )
}
ReactDOM.render(<P />.document.getElementById('root'))

Copy the code

Value transfer for grandparent and grandparent components

Context passes data across components

• callReact.createContext()createProvider(provides data)andConsumer dataTwo components

const { Provider, Consumer } = React.createContext() 
Copy the code

• useThe Provider component acts as the parent node

<Provider>
 <div className="App">
  <Child/>
</Provider>
Copy the code

• Set up theThe value attributeAnd said toData passed

<Provider value="Ancestor component passes data">
Copy the code

• Calling the Consumer componentReceive data(In the Consumer component,The callback functiontheparameter, it isParameters passed by the Provider)

<Consumer>
{data= > <span>{data}</span>}
</Consumer>
Copy the code

conclusion

1. Functional components (stateless components) can access data through props. Class components (stateful components) fetch data via this.props

2. Const A = ()=>{} const A = ()=>{} In the event binding, the combination of function expressions and arrow functions can omit the this binding

3. Const {MSG} = this.state (const {MSG} = this.state)

4. Text description of callback and arrow functions. The arrow function is recognized in the code as the arrow function, but the callback function is to delay execution until needed. In this article, arrow functions are used to delay execution, so some arrow functions are called callback functions to better understand the execution logic of component code