React逐层传递数据的方法

最新推荐文章于 2025-01-24 12:01:55 发布

执念MJ

最新推荐文章于 2025-01-24 12:01:55 发布

阅读量584

点赞数

文章标签： react.js

本文链接：https://blog.youkuaiyun.com/AMD23/article/details/123689577

版权

本文介绍了如何在React应用中使用props实现父组件向子组件传递数据，以及子组件通过回调函数将值返回给父组件。重点展示了`App`组件如何设置状态并将其传递给`First`组件，以及子组件如何通过`theme`和`color`属性进行响应式渲染。

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

import React, { Component } from 'react';

class Second extends Component {
  render() {
    return (
      <div>
        { this.props.theme } - { this.props.color}
      </div>
    )
  }
}
const First = (props) => {
  return (
    <div>
      <Second theme = {props.theme} color = { props.color }/>
    </div>
  )
}
// 子组件给父组件传值 实际上也是父组件给子组件传值
// 父传给子一个函数 该函数由父组件设定，由子组件调用 调用时传递的参数其实就是子组件传递给父组件的值
export default class App extends Component {
  state = {
    theme:'dark',
    color:'red'
  }
  render() {
    return (
      <div>
        <First theme = { this.state.theme} color = { this.state.color}/>
      </div>
    );
  }
}