这个还是需要再细细捋一下。

一个组件是一个class类，里面有它的生命周期之类的

组件的写法：

import React, { Component } from 'react'   //必须导入react和component

class Clock extends Component {   //写一个组件类，继承component
    constructor () {    //构造函数，在这之中写state，即自身的属性
      super()
      this.state = {
        date: new Date()
      }
    }

    componentWillMount () {  //生命周期，在组件初始化之前调用
      this.timer = setInterval(() => {
        this.setState({ date: new Date() })
      }, 1000)
    }
    render () {   //render函数，渲染dom结构
        return (
          <div>
            <h1>
              <p>现在的时间是</p>
              {this.state.date.toLocaleTimeString()}
            </h1>
          </div>
        )
      }
  }

export default Clock  //导出组件供其他的组件调用

其他组件是这样调用的

<Clock data='...'（可选参数）> 

如果有参数，可以在组件内使用props获取到，this.props.data即data里的数据

赏

谢谢你请我吃糖果

微信