web-dev-qa-db-ja.com

コンストラクターはまだReact with autobinding and property initializers with

通常のコンストラクターを使用し、メソッドをバインドし、そのコンストラクター内で状態/属性を定義する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 })
  }
}
_

私の質問は、コンストラクターがまだ必要ですか？または、小道具も自動バインドされていますか？コンストラクターが必要で、super(props)が含まれていると思っていたのですが、コードが機能しているようで、混乱しています。

ありがとう

reactjsecmascript-6es6-classecmascript-next
10
Max Millington

私の理解では、 クラスプロパティ を使用する場合（2番目のコード例のように）、コンストラクターを入力する必要はまったくありません。受け入れられた回答は、「初期状態オブジェクトで小道具を参照する必要がある」場合は必要であると述べていますが、上記のクラスプロパティを使用している場合は、おそらくBabelを使用してトランスパイルしています。この場合はコンストラクターです。 isが使用され、舞台裏で行われているだけです。このため、状態で小道具を使用している場合でも、コンストラクターを自分で追加する必要はありません。

より良い例とより良い説明については this aricle を参照してください。

7
Christian Jensen

初期状態オブジェクトでpropsを参照する必要がない限り、明示的に定義されたコンストラクターは必要ありません。

7
user8826588

コンストラクターを明示的に定義してから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);
1
Dhana