Rumah > Artikel > hujung hadapan web > Apakah tindak balas komponen ibu bapa-anak
Apakah tindak balas komponen ibu bapa-anak
- 青灯夜游asal
- 2022-07-13 18:51:411938semak imbas
Dalam panggilan bersama antara komponen tindak balas, pemanggil dipanggil komponen induk dan penerima dipanggil komponen anak. Nilai boleh dihantar antara komponen induk dan anak: 1. Apabila komponen induk menghantar nilai kepada komponen anak, nilai yang akan dihantar terlebih dahulu dihantar ke komponen anak, dan kemudian dalam komponen anak, props digunakan untuk menerima nilai yang diluluskan oleh komponen induk; 2. Komponen anak Apabila menghantar nilai kepada komponen induk, anda perlu menghantarnya kepada komponen induk melalui kaedah pencetus.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi react18, komputer Dell G3.
1. Komponen dalam React
Komponen tindak balas ialah teg bukan html yang ditentukan sendiri, yang menetapkan bahawa komponen tindak balas 首字母大写:
class App extends Component{
}
<app></app>
2. Komponen ibu bapa-anak
komponen memanggil satu sama lain, 调用者 dipanggil komponen induk, dan 被调用者 dipanggil komponen anak:
import React from 'react';
import Children from './Children';
class Up extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
render(){
console.log("render");
return(
<div>
up
<children></children>
</div>
)
}
}
export default Up;
import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return (
<div>
Children
</div>
)
}
}
export default Children;
3. Komponen induk menghantar nilai kepada komponen anak
Komponen induk menghantar nilai kepada komponen anak menggunakan prop. Apabila komponen induk menghantar nilai kepada komponen anak, nilai yang akan dihantar terlebih dahulu dihantar ke komponen anak, dan kemudian dalam komponen anak, prop digunakan untuk menerima nilai yang diluluskan oleh komponen induk.
Komponen induk mentakrifkan sifat apabila memanggil komponen anak:
<children></children>
Nilai ini msg akan terikat pada sifat props komponen anak dan komponen anak boleh digunakan secara langsung :
this.props.msg
Komponen induk boleh menghantar nilai dan kaedah kepada komponen, malah boleh menghantar sendiri kepada komponen anak
3.1 Melepasi nilai
import React from 'react';
import Children from './Children';
class Up extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
render(){
console.log("render");
return(
<div>
up
<Children msg="父组件传值给子组件" />
</div>
)
}
}
export default Up; import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return (
<div>
Children
<br>
{this.props.msg}
</div>
)
}
}
export default Children;
3.2 Kaedah penghantaran
import React from 'react';
import Children from './Children';
class Up extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
run = () => {
console.log("父组件run方法");
}
render(){
console.log("render");
return(
up
<children></children>
)
}
}
export default Up;
import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
run = () => {
this.props.run();
}
render(){
return (
<div>
Children
<br>
<button>Run</button>
</div>
)
}
}
export default Children;
3.3 Adakah komponen Induk akan berpindah kepada komponen anak
import React from 'react';
import Children from './Children';
class Up extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
run = () => {
console.log("父组件run方法");
}
render(){
console.log("render");
return(
<div>
up
<Children msg={this}/>
</div>
)
}
}
export default Up;import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
run = () => {
console.log(this.props.msg);
}
render(){
return (
<div>
Children
<br>
<button>Run</button>
</div>
)
}
}
export default Children;
4. Komponen anak melepasi nilai kepada komponen induk
Komponen anak menghantar nilai kepada komponen induk dengan mencetuskan kaedah
import React from 'react';
import Children from './Children';
class Up extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
getChildrenData = (data) => {
console.log(data);
}
render(){
console.log("render");
return(
up
<children></children>
)
}
}
export default Up;
import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return (
<div>
Children
<br>
<button> {this.props.upFun("子组件数据")}}>Run</button>
</div>
)
}
}
export default Children;
5 . Dapatkan atribut dan sifat komponen anak melalui rujukan dalam Kaedah komponen induk
import React from 'react';
import Children from './Children';
class Up extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
clickButton = () => {
console.log(this.refs.children);
}
render(){
console.log("render");
return(
up
<children></children>
)
}
}
export default Up;
```
```js
import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
title: "子组件"
}
}
runChildren = () => {
}
render(){
return (
Children
)
}
}
export default Children;
```
[Cadangan berkaitan: Tutorial video Redis]
Atas ialah kandungan terperinci Apakah tindak balas komponen ibu bapa-anak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!