React组件传值

最新推荐文章于 2024-10-17 22:34:31 发布

读心悦

最新推荐文章于 2024-10-17 22:34:31 发布

阅读量289

点赞数

分类专栏：深入浅出react 文章标签： react

本文链接：https://blog.youkuaiyun.com/xuelian3015/article/details/103050675

版权

深入浅出react 专栏收录该内容

132 篇文章 ¥15.90 ¥99.00

订阅专栏

超级会员免费看

本文讲述了在React中如何进行组件间的通信，包括父组件通过props向子组件传值，子组件通过调用父组件传递的回调函数回传值，以及利用context进行跨组件传值的方法。强调了在复杂应用中，合理传递数据以保持应用清晰和易于维护的重要性。

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

父组件向子组件传值

通过父组件的props属性向子组件传值

子组件：Children.js

import React, { Component } from 'react';
export default class Children extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '',
        }
    }
    render() {
        return (
            <div>
                {this.props.parent}
            </div>
        )
    }
}

父组件:Parent.js

import React, { Component } from 'react'
import Children from './Children'

export default class Parent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: "父组件内容"
        }
    }
    render() {