Was sind Eltern-Kind-Komponenten in React?

Bei gegenseitigen Aufrufen zwischen Reaktionskomponenten wird der Aufrufer als übergeordnete Komponente und der Angerufene als untergeordnete Komponente bezeichnet. Werte können zwischen übergeordneten und untergeordneten Komponenten übergeben werden: 1. Wenn eine übergeordnete Komponente einen Wert an eine untergeordnete Komponente übergibt, wird der zu übergebende Wert zuerst an die untergeordnete Komponente übergeben, und dann werden in der untergeordneten Komponente Requisiten verwendet Empfangen Sie den von der übergeordneten Komponente übergebenen Wert. 2. Untergeordnete Komponente Wenn Sie Werte an die übergeordnete Komponente übergeben, müssen Sie diese über die Trigger-Methode an die übergeordnete Komponente übergeben.

Die Betriebsumgebung dieses Tutorials: Windows7-System, React18-Version, Dell G3-Computer.

1. Komponenten in Reaktion

Die React-Komponente ist ein selbstdefiniertes Nicht-HTML-Tag. Es ist vorgeschrieben, dass der erste Buchstabe der React-Komponente großgeschrieben wird:

Die Klasse App erweitert Component{}<App />

2. Eltern-Kind-Komponenten

Wenn Komponenten einander aufrufen, wird der Aufrufer als übergeordnete Komponente und der Angerufene als untergeordnete Komponente bezeichnet:

import React from 'react';import Children from './Children';class Up erweitert React.Component { constructionor(props){ super(props); this.state = { } } render(){ console.log("render "); return( <div> up <Children /> </div> ) }}export default Up;import React from 'react';class Children erweitert React.Component{ constructionor(props){ super(props); this. state = { } } render(){ return ( <div> Children </div> ) }}export default Children;

3. Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente

Übergeordnete Komponenten übergeben mithilfe von Requisiten Werte an untergeordnete Komponenten. Wenn eine übergeordnete Komponente einen Wert an eine untergeordnete Komponente übergibt, wird der zu übergebende Wert zuerst an die untergeordnete Komponente übergeben. Anschließend werden in der untergeordneten Komponente Requisiten verwendet, um den von der übergeordneten Komponente übergebenen Wert zu empfangen.

Die übergeordnete Komponente definiert beim Aufruf der untergeordneten Komponente eine Eigenschaft:

<Children msg="Übergeordnete Komponente übergibt Wert an untergeordnete Komponente" />

Diese Wertnachricht wird an das Props-Attribut der Unterkomponente gebunden und die Unterkomponente kann direkt verwendet werden:

this.props.msg

Übergeordnete Komponenten können Werte und Methoden an Komponenten übergeben und sich sogar selbst an untergeordnete Komponenten übergeben.

3.1 Wertübergabe

import React from 'react';import Children from './Children';class Up erweitert React.Component { constructionor(props){ super(props); this.state = { } } render(){ console.log("render "); return( <div> up <Children msg="Übergeordnete Komponente übergibt Wert an untergeordnete Komponente" /> </div> ) }}export default Up;import React from 'react';class Children erweitert React.Component{ Konstruktor (props){ super(props); this.state = { } } render(){ return ( <div> Children <br /> {this.props.msg} </div> ) }}export default Children;

3.2 Übertragungsart

import React from 'react';import Children from './Children';class Up erweitert React.Component { constructionor(props){ super(props); this.state = { } } run = () => { console.log ("Parent Component Run Method"); } render(){ console.log("render"); return( <div> up <Children run={this.run} /> </div> ) }}export default Up ;import React from 'react';class Children erweitert React.Component{ constructionor(props){ super(props); this.state = { } } run = () => { this.props.run( } render(); ){ return ( <div> Children <br /> <button onClick={this.run}>Run</button> </div> ) }}export default Children;

3.3 Übergeben Sie die übergeordnete Komponente an die untergeordnete Komponente

import React from 'react';import Children from './Children';class Up erweitert React.Component { constructionor(props){ super(props); this.state = { } } run = () => { console.log ("Parent Component Run Method"); } render(){ console.log("render"); return( <div> up <Children msg={this}/> </div> ) }}export default Up;import React from 'react';class Children erweitert React.Component{ constructionor(props){ super(props); this.state = { } } run = () => { console.log(this.props.msg } render (){ return ( <div> Children <br /> <button onClick={this.run}>Run</button> </div> ) }}export default Children;

4. Die Unterkomponente übergibt den Wert an die übergeordnete Komponente

Die untergeordnete Komponente übergibt den Wert über die Trigger-Methode an die übergeordnete Komponente.

import React from 'react';import Children from './Children';class Up erweitert React.Component { constructionor(props){ super(props); this.state = { } } getChildrenData = (data) => { console. log(data); } render(){ console.log("render"); return( <div> up <Children upFun={this.getChildrenData}/> </div> ) }}export default Up;import React from 'react';class Children erweitert React.Component{ constructionor(props){ super(props); this.state = { } } render(){ return ( <div> Children <br /> <button onClick={() = > {this.props.upFun("child Component Data")}}>Run</button> </div> ) }}export default Children;

5. Erhalten Sie Eigenschaften und Methoden der Unterkomponente über Referenzen in der übergeordneten Komponente

import React from 'react';import Children from './Children';class Up erweitert React.Component { constructionor(props){ super(props); this.state = { } } clickButton = () => { console.log (this.refs.children); } render(){ console.log("render"); return( <div> up <Children ref="children" msg="test"/> <button onClick={this.clickButton }>click</button> </div> ) }}export default Up;``````jsimport React from 'react';class Children erweitert React.Component{ constructionor(props){ super(props); state = { title: "Subcomponent" } } runChildren = () => { } render(){ return ( <div> Children <br /> </div> ) }}export default Children;````![in Fügen Sie hier eine Bildbeschreibung ein 6,color_ FFFFFF,t_70)