---

---

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

投稿日：2021年1月22日

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

---

はじめに

import React from "react";

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

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

---

defaultProps

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

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: "説明はありません" };

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

functionコンポーネント

import React from "react";

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

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

---

さいごに

参考URL

---

---

---