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

Posted 2023-02-22

【中文标题】正确解构整个组件的 this.props

【英文标题】：Correctly destructuring this.props for the whole component

【发布时间】：2016-11-01 10:36:12

【问题描述】：

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

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 并且可以在渲染中使用它们，但是如果我需要在它之外使用道具值，即在someFunction() 内部我不确定如果我搬出去会有什么后果@ 987654324@ 并包含在 export default class Input extends React.Component 行之后。这仍然有效吗？

【问题讨论】：

如果你这样做，this.props 将是未定义的，因为它将在项目被渲染之前执行。你为什么要这么做？

@JuanMendes 为了保持一致性，所以我也不需要在 render 之外编写 this.props

我不明白你在做什么，试图避免重复const type, value, required = this.props？我想说的是坏主意，您可能需要在不同的方法中使用不同的值。如果你写了一个你想避免重复的真实例子，那么你有一个更好的问题。不清楚你为什么需要这个，看起来你过度设计了它

"...成功解耦this.props ..." - 你的意思是destructuring 吗？

@naomik 更新了，我就是这个意思

【参考方案1】：

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

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

【参考方案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>
)

【参考方案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;

【讨论】：

我认为 OP 希望变量 type, value, required 已经在其他函数中定义？很难掌握 OP 真正在寻找什么......

啊，我明白了。我认为它们将不得不被传递。一个 redux 解决方案可以很好地处理这个问题。