一个自己犯的react错误

  在看《react小书》高阶组件一节的时候,看到如下代码

import React, { Component } from 'react'

export default (WrappedComponent, name) => {
  class NewComponent extends Component {
    constructor () {
      super()
      this.state = { data: null }
    }

    componentWillMount () {
      let data = localStorage.getItem(name)
      this.setState({ data })
    }

    render () {
      return <WrappedComponent data={this.state.data} />
    }
  }
  return NewComponent
}

  忽然大脑短路了:return <WrappedComponent data={this.state.data} /> 中为何不用this.props来使用data,而使用this.state呢。

  想了一会儿,忽然觉醒,你这是把对子组件的定义和使用搞混了。子组件在定义的时候用this.props来接受未来父组件传来的参数,父组件调用子组件的时候,是直接把父组件的值传过来的,所以用this.state。可以类比函数定义与调用。

posted @ 2018-03-13 13:14  姜瑞涛  阅读(130)  评论(0编辑  收藏  举报