Detaillierte Erläuterung der Verwendung von Requisiten in den drei Hauptattributen von React

//Übergabe des Wertes der übergeordneten Komponente an die Klasse Father extends React.PureComponent{
    machen(){
        zurückkehren (
            <Sohnwert = {"Sohn"} />
        )
    }
}

Klasse Son erweitert React.PureComponent{
    machen(){
        zurückkehren (
            <div>Diese Daten sind {this.props.value}</div>
        )
    }
}

Funktion Fa(){
    zurückkehren (
        <Sohnwert = {"Sohn"} />
    )
}

Funktion Sohn (Eigenschaften) {
    zurückkehren (
        <div>diese Daten sind {props.value}</div>
    )
}

// Wir haben bereits über die Übergabe von Werten von übergeordneten Komponenten an untergeordnete Komponenten gesprochen. Lassen Sie uns nun zusammenfassen, wie untergeordnete Komponenten Werte an übergeordnete Komponenten übergeben. Zu diesem Zeitpunkt muss die übergeordnete Komponente häufig zuerst eine Props-Funktion an die untergeordnete Komponente übergeben. Die untergeordnete Komponente ändert den Wert der übergeordneten Komponente, indem sie die übergebene Funktion export default class Fa extends Component { aufruft.
    Status = {faValue:'Fa1'}

    changeFa = (Wert)=>{
        dies.setState(()=>{
            Rückgabewert {faValue:Wert}
        })
    }
    rendern() {
        zurückkehren (
            <>
                <h1>Fas Wert ist {this.state.faValue}</h1>
                <Son changeFa={this.changeFa}/>
            </>
        )
    }
}

exportiere Standardklasse Son erweitert React.PureComponent{

    Änderungswert = ()=>{
        diese.props.changeFa(diese.inputRef.value)
    }
    rendern() {
        zurückkehren (
            <>
                <input type="text" placeholder={"Bitte geben Sie Ihren Wert ein"} ref={(el)=>{this.inputRef = el}}/>
                <button onClick={this.changeValue}>ändern</button>
            </>
        )
    }
}

Funktion Fa(){
    const [faValue,setFaValue] = useState("Fa1")

    const changeFa = (Wert)=>{
        setFaValue(Wert)
    }
    zurückkehren (
        <div>
            <h1>Fas Wert ist {faValue}</h1>
            <Son changeFa={changeFa} />
        </div>
    )
}

Funktion Sohn (Eigenschaften) {
    const Eingabewert = useRef("")
        //Definieren Sie eine Funktion zum Ändern des Werts der fa-Komponente const changeFaValue = ()=>{
            props.changeFa(Eingabewert.aktueller.Wert)
        }
        zurückkehren (
            <>
                <input type="text" placeholder={"Bitte geben Sie den Wert ein, den Sie ändern möchten"} ref={inputValue}/>
                <button onClick={changeFaValue}>Wert ändern</button>
            </>
        )
}

//Beispielsweise muss ich im vorherigen Eingabefall einen Wert an die Brother-Komponente übergeben. Wenn wir keine Requisiten verwenden, wie sollen wir dann „Bro“ schreiben:
exportiere Standardklasse Bro erweitert Komponente {

    componentDidMount() {
        dies.sonData = PubSub.subscribe("Bruder",(msg,data)=>{
            console.log("Bro Component hat die Nachricht erhalten", Daten);
        })
    }

    componentWillUnmount() {
        PubSub.abbestellen(diese.sonData)
    }

    rendern() {
        zurückkehren (
            <>
                <div>Bruder</div>
            </>
        )
    }
}
Sohn:
exportiere Standardklasse Son erweitert React.PureComponent{

    Änderungswert = ()=>{
        PubSub.publish("Bruder",dieser.EingabeRef.Wert)
    }

    rendern() {
        zurückkehren (
            <>
                <input type="text" placeholder={"Bitte geben Sie Ihren Wert ein"} ref={(el)=>{this.inputRef = el}}/>
                <button onClick={this.changeValue}>ändern</button>
            </>
        )
    }
}