web-dev-qa-db-ja.com

Reactコンポーネント 'displayName'は何に使用されますか？

displayNameプロパティを追加することで反応コンポーネントに名前を付けることは それが良い習慣と考えられている であることは知っていますが、理由はわかりません。反応ドキュメントでは、それは言う：

DisplayName文字列は、デバッグメッセージで使用されます。 JSXはこの値を自動的に設定します。 JSXの詳細を参照してください。

なぜそんなに重要なのですか？追加しないとどうなりますか？ （これまで私はそれを持っていなかったし、デバッグの問題はありませんでした）

コンポーネントの命名方法に関する推奨事項/グッドプラクティスはありますか？

reactjseslint
25
Kuf

私は常にdisplayNameを割り当てている変数と同じ名前に設定しています。これは、開発ビルドでのみ使用されます。これは、本番ビルドでのデッドコードの除去によって削除され、アプリケーション内で使用しないでください。

使用場所については、主にリアクションエラーメッセージング内にあります。これがデバッグに価値があると言われている理由です。名前を導出できない場合、プロジェクトに複数のコンポーネントがある場合、エラーメッセージはデフォルトでComponentと表示され、デバッグが非常に困難になります。

次に、反応ソースのdisplayNameを参照するいくつかのエラーメッセージを示します。

無効な戻り値

インラインスタイルエラー

28
kwelch

この記事は私を助けました：

React Native component class？

    class CardGroup extends Component {
      render() {
        return (
          <div>{this.props.children}</div>
        )
      }
    }
    CardGroup.propTypes = {
      children: function (props, propName, componentName) {
        const prop = props[propName]

        let error = null
        React.Children.forEach(prop, function (child) {
          if (child.type !== Card) {
            error = new Error('`' + componentName + '` children should be of type `Card`.');
          }
        })
        return error
      }
    }
1
Edward Koetsjarjan