Question

我正在重构一个基于es6类的React组件，它使用普通的构造函数，然后绑定方法，并在该构造函数中定义状态/属性。像这样：

class MySpecialComponent extends React.Component {
  constructor(props) {
   super(props)
   this.state = { thing: true }
   this.myMethod = this.myMethod.bind(this)
   this.myAttribute = { amazing: false }
  }

  myMethod(e) {
   this.setState({ thing: e.target.value })
  }
}

我想重构这个，以便我自动绑定函数，并使用属性初始化器来处理状态和属性。现在我的代码看起来像这样：

class MySpecialComponent extends React.Component {
  state = { thing: true }
  myAttribute = { amazing: false }


  myMethod = (e) => {
   this.setState({ thing: e.target.value })
  }
}

我的问题是，我还需要构造函数吗？或道具也是autobound？我本来希望仍然需要构造函数并包含super(props)，但我的代码似乎正在工作，我很困惑。

由于

Answer 1

除非您需要在初始状态对象中引用props，否则您不需要显式定义的构造函数。

Answer 2

据我了解，使用class properties时根本不需要键入构造函数（如第二个代码示例中所示）。公认的答案表明，如果“需要在初始状态对象中引用道具”确实需要一个，但是如果您使用上述类属性，则可能是使用Babel进行转换，在这种情况下为构造函数是，它只是在幕后完成。因此，即使您在状态下使用道具，也无需自己添加构造函数。

有关更好的示例和更好的说明，请参见this aricle。

Answer 3

您不需要显式定义构造函数，然后执行super（props）。您可以按照以下示例访问props。即“ prop1”

class MySpecialComponent extends React.Component {
    state = { 
    thing: true ,
   prop1:this.props.prop1
  }
  myAttribute = { amazing: false }


 myMethod = (e) => {
  this.setState({ thing: e.target.value })
}


  render(){
  console.log(this.state.prop1);
   return(
       <div>Hi</div>
   );

   }
 }


 ReactDOM.render(<MySpecialComponent prop1={1}/> , mountNode);

React中是否仍然需要使用自动绑定和属性初始值设定项构造函数

3 个答案: