React父子组件通过props通信

原创已于 2023-12-04 23:57:53 修改 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react

于 2023-04-02 17:01:05 首次发布

我的笔记专栏收录该内容

45 篇文章

订阅专栏

文章展示了一个在React中父子组件间数据传递的例子。父组件(Demo)通过props向子组件(Child)传递信息，并定义了一个方法`saveList`来接收子组件回调的数据。子组件则通过更新其state并调用`this.props.saveList`将数据回传给父组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件：

import React from 'react'
import Child from './components/Child'

export default class Demo extends React.Component{
    state={
        info:{} //传递给子组件
    }

    saveList(list){
        //子组件传来的数据
        console.log(list)
    }
    render(){
        <div>
            <Child info={this.state.info} saveList={this.saveList}/>
        </div>
    }
}

子组件：

import React from 'react'

export default class Child extends React.Component{
    state={
        list:[]
    }

    const toFather = ()=>{
        this.props.saveList(this.state.list) //传递给父组件数据
    }
    render(){
        console.log(this.props.list) //获取父组件传递的数据
        return <div>子组件</div>
    }
}