React Non-parent component parameter transfer

New: Cross-level parameter passing mainly avoids per-level assignment and also avoids using DVA

import React from 'react'
const {Provider,Consumer} = React.createContext('default')
export default class ContextDemo extends React.Component {
    state={
        newContext:'createContext'
    }
  render() {
      const {newContext} = this.state
    return (
        <Provider value={newContext}>
            <div>
                <label>childContent</label>
                <input type="text" value={newContext} onChange={e= >this.setState({newContext:e.target.value})}/>
            </div>
            <Son />
        </Provider>)}}class Son extends React.Component{
    render(){
        return <Consumer>
            {
                (name)=>
                    <div style={{border:'1px solid red',width:'60% ',margin:'20px auto',textAlign:'center'}} >
                        <p>Child component gets :{name}</p>
                        <Grandson />
                    </div>
                
            }
        
        </Consumer>}}class Grandson extends React.Component{
    render(){
        return <Consumer>
            {
                (name)=>
                    <div style={{border:'1px solid red',width:'60% ',margin:'20px auto',textAlign:'center'}} >
                        <p>{name}</p>
                    </div>
                
            }
        
        </Consumer>}}Copy the code

The old project approach is also introduced, using prop-types

import React from 'react'
import PropTypes from 'prop-types'
class ContextDemo extends React.Component {
    // getChildContext
    state={
        newContext:'createContext'
    }
    getChildContext(){
        return {value:this.state.newContext}
    }
  render() {
      const {newContext} = this.state
    return (
            <div>
                <div>
                    <label>childContent</label>
                    <input type="text" value={newContext} onChange={e= >this.setState({newContext:e.target.value})}/>
                </div>
                <Son />
            </div>)}}class Son extends React.Component{
    render(){
        return <div>
            <p>children:{this.context.value}</p>
        </div>
    }
}
Son.contextTypes = {
    value:PropTypes.string
}
ContextDemo.childContextTypes = {
    value:PropTypes.string
}
export default() = ><ContextDemo >
  
  </ContextDemo>
Copy the code

ref

import React from 'react'

// The function component also wants to get the DOM through ref
const TargetFunction = React.forwardRef((props,ref) = >(
    <input type="text" ref={ref}/>
))
export default class FrodWordRefDemo extends React.Component {
  constructor() {
    super(a)this.ref = React.createRef()
  }

  componentDidMount() {
    this.ref.current.value = 'ref get input'
  }

  render() {
    return <TargetFunction ref={this.ref}>
    </TargetFunction>}}Copy the code

pubsub-js

import React from 'react'
import PubSub from 'pubsub-js'
export default class Bro extends React.Component{
    state = {
        value:' '
    }

    render(){
        const {value} = this.state
        PubSub.subscribe('SOS'.(res,data) = >{
            this.setState({
                value:data
            })
        })
        return (
            <div>I got it.<h1>{value}</h1>
            </div>)}}Copy the code

import React from 'react'
import PubSub from 'pubsub-js'
export default class Children extends React.Component{
    state = {
        value:' '
    }
    handelChange = (e) = >{
        this.setState({
            value:e.target.value
        })
    }
    send = () = >{
        const {value} = this.state
        PubSub.publish('SOS',value)
    }
    render(){
        const {value} = this.state
        return (
            <div>
                <input type="text" value={value} onChange={this.handelChange}/>
                <button onClick={this.send}>send</button>
            </div>)}}Copy the code