web-dev-qa-db-ja.com

propTypesとdefaultPropsを静的プロップとしてReact class？

これは私が今かなり長い間やってきた方法です：

export default class AttachmentCreator extends Component {
  render() {
    return <div>
      <RaisedButton primary label="Add Attachment" />
    </div>
  }
}

AttachmentCreator.propTypes = {
  id: PropTypes.string,
};

しかし、私は人々がこの方法でそれを見ているのを見ました：

export default class AttachmentCreator extends Component {
  static propTypes = {
    id: PropTypes.string,
  };

  render() {
    return <div>
      <RaisedButton primary label="Add Attachment" />
    </div>
  }
}

そして実際、コンストラクターの外部で初期状態を設定する人々を見てきました。これは良い習慣ですか？それは私を悩ませていましたが、誰かがデフォルトの小道具を静的として設定するのは良いアイデアではないと言った議論を覚えています-私はちょうど理由を覚えていません。

classreactjsecmascript-next
32
ffxsam

非関数プロパティは、es2015クラスでは現在サポートされていません。 es2016の提案。 2番目の方法はかなり便利ですが、構文をサポートするにはプラグインが必要です（ 非常に一般的なbabelプラグインがあります ）。

一方、オープンソースプロジェクトでいっぱいの手は、TypeScriptインターフェイスやActionConstantsのようなproptypeを扱い始め、実際にはさまざまなコンポーネントpropタイプを格納する個別のフォルダー/ファイルを作成し、コンポーネントにインポートします。

要約すると、両方の構文を使用しても問題ありません。ただし、厳密にES2015のみを使用する場合、仕様では後者の構文はまだサポートされていません。

11
PhilVarg

実際、パフォーマンスの点ではまったく同じです。 React.JSは比較的新しいテクノロジーであるため、グッドプラクティスと見なされるかどうかはまだ明確ではありません。誰かを信頼したい場合は、このAirBNBのスタイルガイドを確認してください。

https://github.com/airbnb/javascript/tree/master/react#ordering

import React, { PropTypes } from 'react';

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

class Link extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;

PropTypesオブジェクトリテラルでconstを宣言し、クラスをきれいに保ち、後で静的プロパティに割り当てます。私は個人的にこのアプローチが好きです:)

37
dandel

ああ、それはバベルと完全に合法だ

class DataLoader extends React.Component {
  static propTypes = {
    onFinishedLoading: PropTypes.func
  }

  static defaultProps = {
    onFinishedLoading: () => {}
  }
}

...とにかくこれに変換されるので。

class DataLoader extends React.Component {}

DataLoader.propTypes = {
  onFinishedLoading: PropTypes.func
};

DataLoader.defaultProps = {
  onFinishedLoading: () => {}
};

静的フィールドは、内部でクラスプロパティとして変換されます。 バベルREPLをご覧ください

さらに、stateまたは他のclass fieldsをクラスに直接割り当てるインスタンスコンストラクターに変換されます。

10
Qwerty

コンポーネントがステートレスである場合、つまりそれ自体の状態をまったく変更しない場合、ステートレスコンポーネント（export default function MyComponent(props)）として宣言し、propTypesを外部で宣言する必要があります。

初期状態宣言をコンストラクターに入れるのが良い習慣であるかどうかはあなた次第です。このプロジェクトでは、コンストラクタで使用する必要があるcomponentWillMount()ボイラープレートが気に入らないという理由だけで、super(props)で初期状態を宣言します。

0
Foxhoundn