关于React的父子通信

原创已于 2024-01-03 11:19:28 修改 · 445 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

于 2024-01-03 11:19:08 首次发布

本文详细介绍了在React中，父组件如何通过props将state传递给子组件，以及子组件如何通过调用父组件的方法实现向父组件的值传递。

一、父值组件向子组件传
父组件向子组件传值，通过`props`，将父组件的`state`传递给了子组件。

父组件代码：

import React, { Component } from "react";
import Child from './Child' //引入子组件

export class App extends Component {
//定义数据
state = {
txt: '狒狒',
}
render () {
return <div>
//渲染子组件，并向子组件传递txt属性
<Child txt={this.state.txt} ></Child>
</div>;
}
}

export default App;
子组件代码:
创建一个Child.jsx

import React, { Component } from 'react'

export class Child extends Component {
// 使用props属性接收父组件传递过来的参数
constructor (props) {
super(props)
}

render () {
return (
<div>
// 渲染，props从父组件接收过来的参数
{this.props.txt}
</div>
)
}
}

export default Child
二、子组件向父组件传值
子组件通过调用父组件传递到子组件的方法可以将子组件的属性传递到父组件。

子组件代码：

import React, { Component } from 'react'

export class Child extends Component {
constructor (props) {
super(props)
}

//定义数据
state = {
msg: '狒狒2'
}

//点击事件
getChild = () => {
this.props.getChild(this.state.msg)
}

render () {
return (
<div>
<button onClick={this.getChild}>子往父传值</button>
</div>
)
}
}

export default Child
父组件代码：

import React, { Component } from "react";
import Child from './Child' //引入子组件

export class App extends Component {

state = {
msg: ''
}

//用于接收子组件的传值方法，参数为子组件传递过来的值
getChildFn = (e) => {
console.log(e);
this.setState({
//把子组件传递过来的值赋给this.state中的属性
msg: e
})
}

render () {
return <div>
//1. 渲染子组件，设置子组件访问的方法,getChild属性名为子组件中调用的父组件方法名
<Child getChild={this.getChildFn}></Child>
{this.state.msg}
</div>;
}
}

export default App;
这是我对React父子通信的理解，感谢大家的阅读，如果其中有错误，希望大家指出