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，因为那时构造函数不会被调用。

这是一种保持渲染或功能的推荐方法，因为你的父组件可以改变状态，这会导致你的孩子被重新渲染，所以你需要为每个渲染提供新的道具。

Answer 2

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

嗯，你做不到。解构只能分配局部变量，因此您需要在每个函数中对props进行解构。否则写this.props.value就没有错。在有助于提高可读性时使用解构，而不仅仅是因为您不想输入this.props。

我会写这样的代码

// import cx from whatever

const someFunction = value=> console.log(value)

export const Input = ({type, value, required}) => (
  someFunction(value),
  <div className={cx('Input')}>
    <input type={type} value={value} required={required} />
  </div>
)

Answer 3

也许考虑将其更新为功能组件。

function someFunction(props) {
  console.log(props.value)
}

function Input(props) {
  const { type, value, required } = props;

  someFunction(props); // logs props.value

  return (
    <div className={cx('Input')}>
      <input type={type} value={value} required={required} />
    </div>
  )
}

export default Input;

正确地解构this.props为整个组件

3 个答案: