※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。


【React】コンポーネントのdefaultPropsを使おう

react web開発 javascript フロント開発 TypeScript props

投稿日:2021年1月22日

このエントリーをはてなブックマークに追加
Reactのコンポーネントではpropsのデフォルト値を設定することができます。デフォルト値を使ってコードの汎用性・可読性を高めましょう。

はじめに

Reactのコンポーネントは次の様にpropsを利用して値を受け取ることができます。

import React from "react";

class Article extends React.Component {
  render() {
    return <div>{this.props.title}</div>;
  }
}

このpropsには以下のような注意点があります。

  • プロパティを渡し忘れる
  • プロパティが増えた際に呼び出し側のコードが煩雑になる

プロパティの渡し忘れはTypeScriptを利用することなどで防ぐことができますが、プロパティが大量に増えた場合はどうでしょう?

下のコードみたいなプロパティが大量のコードはできれば避けたいですね。

function App() {
  return (
    <div className="App">
      <Article
        title="スーパーマンの作り方"
        author="Marsquai"
        showContent={true}
        articleType="News"
        color="Red"
        theme="chic"
      />
    </div>
  );

こうならないようにdefaultPropsでpropsのデフォルト値を設定してあげましょう。


defaultProps

classコンポーネントのデフォルト値

デフォルト値の設定は簡単です。

クラスで定義したコンポーネントのdefaultPropsというプロパティにデフォルトで設定したいオブジェクトを渡すだけです。

import React from "react";

class Article extends React.Component {
  render() {
    return (
      <div>
        <div>{this.props.title}</div>
        <div>{this.props.description}</div>
      </div>
    );
  }
}
Article.defaultProps = { description: "説明はありません" };

クラスコンポーネントの場合静的プロパティとしてdefaultPropsを定義することができます。

defaultPropsはconstructorの呼び出しの前に参照されます。

必ず静的プロパティで定義することに注意してください。

class Article extends React.Component {
  static defaultProps = { description: "説明はありません" };
  render() {
    return (
      <div>
        <div>{this.props.title}</div>
        <div>{this.props.description}</div>
      </div>
    );
  }
}

functionコンポーネント

インテリセンスが効かないため勘違いしている人もいますが(...まあ自分のことなんだけど)、

functionコンポーネントでも問題なくdefaultPropsを設定できます。

import React from "react";

const Article = (props) => 
{
    return (
      <div>
        <div>{props.title}</div>
        <div>{props.description}</div>
      </div>
    );
  }

Article.defaultProps = { description: "説明はありません" };

さいごに

参考URL

このエントリーをはてなブックマークに追加


関連記事

記事へのコメント
    
検索