使用react进行父子组件传值

寻宝阁

906人浏览 · 2023-06-11 11:10:48

寻宝阁 · 2023-06-11 11:10:48 发布

在单页面里面，父子组件传值是比较常见的，之前一直用vue开发，今天研究了一下react的父子组件传值，和vue差不多的思路，父组件向子组件传值，父通过初始state，子组件通过this.props进行接收就可以了；子组件向父组件传值需要绑定一个事件，然后事件是父组件传递过来的this.props.event来进行值的更替，话不多说，上代码：

父组件向子组件传值：

父组件Comment.js:

import React from "react"

import ComentList from "./ComentList"

class Comment extends React.Component {

constructor(props) {

super(props);

this.state = {

arr: [{

"userName": "fangMing", "text": "123333", "result": true

}, {

"userName": "zhangSan", "text": "345555", "result": false

}, {

"userName": "liSi", "text": "567777", "result": true

}, {

"userName": "wangWu", "text": "789999", "result": true

},]

}

render() {

return (

<div>

<ComentList arr={this.state.arr}> //这里把state里面的arr传递到子组件

</ComentList>

</div>

)

}

export default Comment;

子组件ComentList.js:

import React from "react"

class ComentList extends React.Component {

constructor(props) {

super(props);

}

render() {

return (

<div className="list">

<ul>

{

this.props.arr.map(item => { //这个地方通过this.props.arr接收到父组件传过来的arr，然后在{}里面进行js的循环

return (

<li key={item.userName}>

{item.userName} 评论是:{item.text}

</li>

)

})

}

</ul>

</div>

)

}

export default ComentList;

　父组件向子组件传值是比较容易的，我们来看一下效果：

好了，我们开始重头戏，

子组件向父组件传值，

同样是父组件：

import React from "react"

import ComentList from "./ComentList"

class Comment extends React.Component {

constructor(props) {

super(props);

this.state = {

parentText: "this is parent text",

arr: [{

"userName": "fangMing", "text": "123333", "result": true

}, {

"userName": "zhangSan", "text": "345555", "result": false

}, {

"userName": "liSi", "text": "567777", "result": true

}, {

"userName": "wangWu", "text": "789999", "result": true

},]

}

fn(data) {

this.setState({

parentText: data //把父组件中的parentText替换为子组件传递的值

},() =>{

console.log(this.state.parentText);//setState是异步操作，但是我们可以在它的回调函数里面进行操作

});

}

render() {

return (

<div>

//通过绑定事件进行值的运算，这个地方一定要记得.bind(this)，

不然会报错，切记切记，因为通过事件传递的时候this的指向已经改变

<ComentList arr={this.state.arr} pfn={this.fn.bind(this)}>

</ComentList>

<p>

text is {this.state.parentText}

</p>

</div>

)

}

export default Comment;

　　子组件：

import React from "react"

class ComentList extends React.Component {

constructor(props) {

super(props);

this.state = ({

childText: "this is child text"

})

}

clickFun(text) {

this.props.pfn(text)//这个地方把值传递给了props的事件当中

}

render() {

return (

<div className="list">

<ul>

{

this.props.arr.map(item => {

return (

<li key={item.userName}>

{item.userName} 评论是:{item.text}

</li>

)

})

}

</ul>

//通过事件进行传值，如果想得到event，可以在参数最后加一个event，

这个地方还是要强调，this，this，this

<button onClick={this.clickFun.bind(this, this.state.childText)}>

click me

</button>

</div>

)

}

export default ComentList;

before：

after：

最后想说一点，如果嵌套的父子组件很深好几层，这个时候我想你应该考虑用状态管理工具redux了

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git