React-Beispielcode zur Parameterübergabe für nicht über- und untergeordnete Komponenten

React von „react“ importieren
const {Anbieter, Verbraucher} = React.createContext('Standard')
exportiere Standardklasse ContextDemo erweitert React.Component {
    Zustand={
        neuerKontext:'Kontext erstellen'
    }
  rendern() {
      const { neuerKontext } = dieser.Zustand
    zurückkehren (
        <Anbieterwert={newContext}>
            <div>
                <label>Unterinhalt</label>
                <input Typ="text" Wert={neuerKontext} beiÄnderung={e=>this.setState({neuerKontext:e.target.value})}/>
            </div>
            <Sohn />
        </Anbieter>
    )
  }
}
Klasse Son erweitert React.Component{
    machen(){
        return <Verbraucher>
            {
                (Name)=>
                    <div Stil={{border:'1px durchgezogenes Rot',width:'60%',margin:'20px auto',textAlign:'center'}}>
                        <p>Von der Unterkomponente erhaltener Inhalt: {name}</p>
                        <Enkel />
                    </div>
                
            }
        
        </Verbraucher>
    }
}
Klasse Enkel erweitert React.Component{
    machen(){
        return <Verbraucher>
            {
                (Name)=>
                    <div Stil={{border:'1px durchgezogenes Rot',width:'60%',margin:'20px auto',textAlign:'center'}}>
                        <p>Der von der Enkelkomponente erhaltene Inhalt: {name}</p>
                    </div>
                
            }
        
        </Verbraucher>
    }
}

React von „react“ importieren
Importiere PropTypes aus „Prop-Types“
Klasse ContextDemo erweitert React.Component {
    // getChildContext
    Zustand={
        neuerKontext:'Kontext erstellen'
    }
    getChildContext(){
        returniere {Wert:dieser.Zustand.neuerKontext}
    }
  rendern() {
      const { neuerKontext } = dieser.Zustand
    zurückkehren (
            <div>
                <div>
                    <label>Unterinhalt</label>
                    <input Typ="text" Wert={neuerKontext} beiÄnderung={e=>this.setState({neuerKontext:e.target.value})}/>
                </div>
                <Sohn />
            </div>
    )
  }
}
Klasse Son erweitert React.Component{
    machen(){
        Rückgabewert <div>
            <p>Kinder:{dieser.Kontext.Wert}</p>
        </div>
    }
}
Son.contextTypes = {
    Wert:PropTypes.string
}
ContextDemo.childContextTypes = {
    Wert:PropTypes.string
}
Standard exportieren () => 
  <KontextDemo>
  
  </ContextDemo>

React von „react“ importieren

// Funktionskomponenten wollen auch Dom über Ref erhalten
const TargetFunction = React.forwardRef((props, ref) => (
    <Eingabetyp="Text" ref={ref}/>
))
exportiere Standardklasse FrodWordRefDemo erweitert React.Component {
  Konstruktor() {
    super()
    dies.ref = React.createRef()
  }

  componentDidMount() {
    this.ref.current.value = 'Ref-Eingabe abrufen'
  }

  rendern() {
    Rückgabewert <Zielfunktion ref={this.ref}>
    </Zielfunktion>
  }
}

React von „react“ importieren
PubSub aus „pubsub-js“ importieren
exportiere Standardklasse Bro erweitert React.Component{
    Zustand = {
        Wert:''
    }

    machen(){
        const {Wert} = dieser.Zustand
        PubSub.subscribe('SOS',(res,data)=>{
            dies.setState({
                Wert:Daten
            })
        })
        zurückkehren (
            <div>
                Ich habe <h1>{value}</h1> erhalten
            </div>
        )
    }
}

React von „react“ importieren
PubSub aus „pubsub-js“ importieren
exportiere Standardklasse Children erweitert React.Component{
    Zustand = {
        Wert:''
    }
    handelChange = (e) => {
        dies.setState({
            Wert:e.Ziel.Wert
        })
    }
    senden = () => {
        const {Wert} = dieser.Zustand
        PubSub.publish('SOS',Wert)
    }
    machen(){
        const {Wert} = dieser.Zustand
        zurückkehren (
            <div>
                <input type="text" value={value} beiÄnderung={this.handelChange}/>
                <button onClick={this.send}>Senden</button>
            </div>
        )
    }
}