react-父组件将状态做为属性传递给子组件

最新推荐文章于 2022-07-22 15:37:49 发布

杜杜的杜

最新推荐文章于 2022-07-22 15:37:49 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/qq_33871178/article/details/88656156

react 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了在React中如何将父组件的状态作为属性传递给子组件，实现数据自顶向下流动的机制。

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

数据自顶向下流动

import React, { Component } from 'react';
// import img01 from './images/01.png'
import './App.css';

class App extends Component {


  render() {
    class Son extends Component{
      render(){
        return (
          <span>son component :{this.props.dd.toLocaleTimeString()} {this.props.aa}</span>
        )
      }
    }
    //使用类就允许我们使用其它特性，例如局部状态、生命周期钩子
    class Clock extends Component{

      constructor(props){
        super(props);
        this.state={
          date:new Date()
        }
      }
      componentDidMount(){
        this.timer=setInterval(
          ()=>this.tick()
        ,1000)
      }
      componentWillUnmount(){
        clearInterval(this.timer)
      }
      tick(){
        this.setState({
          date:new Date()
        })
      }

     

      render(){
        return(
          <div>today: {this.state.date.toLocaleTimeString()}
              <Son dd={this.state.date} aa={'aaa'}/>  //将父组件状态作为属性dd 传递给子组件Son
          </div>
        )
      }
    }

    





    return (
      <div className="App">
        <Clock />
      </div>
    );
  }
}

export default App;