reactjs - 在 React 类组件中将 props 分配给变量

Question

我有一个简单的 react 组件。我想将组件方法内的变量分配给 props。我尝试过此方法适用于功能组件:

class Pets extends React.component {
  constructor(props) {
    super(props)
  }

 const {dog, cat, frog} = props
 // the code on the line above does not work

 render() {
   return (
     <div>
       {dog.name}
       {cat.name}
     </div>
   )
 }
}

Answer 1

那是行不通的。 props是您使用 <Pets /> 创建的组件实例的属性例如 JSX。它需要位于类 Pets 的实例方法内。如果您在 render 中执行此操作，它将起作用。方法 const {dog, cat, frog} = this.props 。 props在类里面，你现在的问题并不是他们所期望的。

constructor内功能只是const {dog, cat, frog} = props会起作用，因为这里props对象作为参数被接收。所以this.props (在super(props)行之后)and props` 是同一个对象。

通常，您会在需要的地方解压 Prop ，例如您需要 render 内的 Prop 。创建一些输出，因此您在那里解压它。我试图在这个答案中解释什么 props意味着在类主体和实例方法主体中，如何访问 props以不同的方法等。但如 xadm said ，由于范围边界的原因，通过认为稍后将在其他方法中访问它们来在构造函数中解压它们将不起作用，除非您再次使用 this.dog = props.dog 将它们作为属性存储到实例中。 。但这是一个可怕的想法，永远不要这样做。当您仅需要该位置的 props 对象的任何属性时，只需解压它们即可。