javascript - 正确解构整个组件的 this.props

Question

我今天遇到一个问题，考虑以下组件:

export default class Input extends React.Component {
  someFunction() {
    console.log(this.props.value)
  }

  render () {
    const { type, value, required } = this.props
    return (
      <div className={cx('Input')}>
        <input type={type} value={value} required={required} />
      </div>
    )
  }
}

我成功地解构了 this.props 并且可以在渲染中使用它们，但是如果我需要在它之外使用 prop 值怎么办，即在 someFunction() 我我不确定如果我移出 constant { ... } 并在 export default class Input extends React.Component { 行之后包含会产生什么后果。这仍然有效吗？

Answer 1

如果你把它移到外面，它们就会是 null ，因为那时构造函数不会被调用。

将其保留在渲染或函数中是一种推荐方法，因为您的父组件可以更改状态，这将导致您的子组件重新渲染，因此您需要为每个渲染提供新的 Prop 。