一个自己犯的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。可以类比函数定义与调用。
浙公网安备 33010602011771号