Dalam pemanggilan timbal balik antar komponen reaksi, pemanggil disebut komponen induk dan penerima disebut komponen anak. Nilai dapat diteruskan antara komponen induk dan anak: 1. Ketika komponen induk meneruskan nilai ke komponen anak, nilai yang akan diteruskan terlebih dahulu diteruskan ke komponen anak, dan kemudian di komponen anak, props digunakan untuk menerima nilai yang diteruskan oleh komponen induk; 2. Komponen anak Saat meneruskan nilai ke komponen induk, Anda harus meneruskannya ke komponen induk melalui metode pemicu.
Lingkungan operasi tutorial ini: sistem Windows7, versi react18, komputer Dell G3.
1. Komponen dalam React
Komponen reaksi adalah tag non-html yang ditentukan sendiri. Ditetapkan bahwa huruf pertama dari komponen reaksi menggunakan huruf kapital:
class App memperluas Komponen{}<App />
2. Komponen orang tua-anak
Ketika komponen memanggil satu sama lain, pemanggilnya disebut komponen induk dan yang dipanggil disebut komponen anak:
import React from 'react';import Children from './Children';class Up extends React.Component { konstruktor(props){ super(props); this.state = { } } render(){ console.log("render "); return( <div> up <Children /> </div> ) }}ekspor default Naik;impor React dari 'react';class Children extends React.Component{ konstruktor(props){ super(props); ini. state = { } } render(){ return ( <div> Anak </div> ) }}ekspor Anak default;
3. Komponen induk meneruskan nilai ke komponen anak
Komponen induk meneruskan nilai ke komponen anak menggunakan alat peraga. Ketika komponen induk meneruskan nilai ke komponen anak, nilai yang akan diteruskan terlebih dahulu diteruskan ke komponen anak, dan kemudian di komponen anak, props digunakan untuk menerima nilai yang diteruskan oleh komponen induk.
Komponen induk mendefinisikan properti ketika memanggil komponen anak:
<Children msg="Komponen induk meneruskan nilai ke komponen anak" />
Pesan nilai ini akan terikat ke atribut props dari subkomponen, dan subkomponen dapat digunakan secara langsung:
ini.props.msg
Komponen induk dapat meneruskan nilai dan metode ke komponen, dan bahkan dapat meneruskan dirinya sendiri ke komponen turunan.
3.1 Nilai kelulusan
import React from 'react';import Children from './Children';class Up extends React.Component { konstruktor(props){ super(props); this.state = { } } render(){ console.log("render "); return( <div> up <Children msg="Komponen induk meneruskan nilai ke komponen anak" /> </div> ) }}ekspor default Naik;impor React dari 'react';class Children extends React.Component{ konstruktor (alat peraga){ super(alat peraga); this.state = { } } render(){ return ( <div> Anak <br /> {ini.props.msg} </div> ) }}ekspor Anak default;
3.2 Metode penularan
import React from 'react';import Children from './Children';class Up extends React.Component { konstruktor(props){ super(props); this.state = { } } run = () => { console.log ("metode menjalankan komponen induk"); } render(){ console.log("render"); return( <div> up <Children run={this.run} /> </div> ) }}ekspor default Naik ;impor React dari 'react';kelas Anak-anak memperluas React.Component{ konstruktor(props){ super(props); this.state = { } } run = () => { this.props.run(); ){ return ( <div> Anak <br /> <button onClick={this.run}>Jalankan</button> </div> ) }}ekspor Anak default;
3.3 Meneruskan komponen induk ke komponen anak
import React from 'react';import Children from './Children';class Up extends React.Component { konstruktor(props){ super(props); this.state = { } } run = () => { console.log ("metode menjalankan komponen induk"); } render(){ console.log("render"); return( <div> up <Children msg={this}/> </div> ) }}ekspor default Naik;impor Bereaksi dari 'react';kelas Anak-anak extends React.Component{ konstruktor(props){ super(props); this.state = { } } run = () => { console.log(this.props.msg); (){ return ( <div> Anak <br /> <button onClick={this.run}>Jalankan</button> </div> ) }}ekspor Anak default;
4. Subkomponen meneruskan nilai ke komponen induk
Komponen anak meneruskan nilai ke komponen induk melalui metode pemicu.
import React from 'react';import Children from './Children';class Up extends React.Component { konstruktor(props){ super(props); this.state = { } } getChildrenData = (data) => { console. log(data); } render(){ console.log("render"); return( <div> up <Children upFun={this.getChildrenData}/> </div> ) }}ekspor default Naik;impor Bereaksi dari 'react';kelas Anak-anak extends React.Component{ konstruktor(alat peraga){ super(alat peraga); this.state = { } } render(){ return ( <div> Anak-anak <br /> <button onClick={() = > {this.props.upFun("data komponen anak")}}>Jalankan</button> </div> ) }}ekspor Anak default;
5. Dapatkan properti dan metode sub-komponen melalui referensi di komponen induk
import React from 'react';import Children from './Children';class Up extends React.Component { konstruktor(props){ super(props); this.state = { } } clickButton = () => { console.log (ini.refs.anak-anak); } render(){ console.log("render"); return( <div> naik <Anak-anak ref="anak-anak" msg="test"/> <tombol onClick={ini.clickButton }>klik</button> </div> ) }}ekspor default Naik;``````jsimport React from 'react';class Children extends React.Component{ konstruktor(props){ super(props); state = { judul: "Subkomponen" } } runChildren = () => { } render(){ return ( <div> Anak <br /> </div> ) }}ekspor Anak default;````
