ReactコンポーネントのPropsにデフォルト値を設定するdefaultPropsの使い方

React コンポーネントに値を渡すには通常は Props を使います。

この Porps に想定のものが設定されていない場合にデフォルト値を使って処理を行う方法です。

React 環境の作成方法は以下のサイトを参照して作成してください。

Next.jsでReactを使った開発環境を作成する方法

Reactを利用してアプリケーションを作成する環境を作るには「npx create-react-app」もしくは「npx...

lightgauge.net

ReactコンポーネントのPropsにデフォルト値を設定するdefaultProps

関数や ES6 クラスでは、defaultProps はコンポーネント自体のプロパティとして定義されます。

まずは React コンポーネントを呼び出す側のソース（index.js）です。

import React      from "react" ;
import SetDefault from "./set_default" ;

export default class LoadSetDefault extends React.Component {
	constructor( props ){
        super( props ) ;
    }
    render(){
        return(
            <React.Fragment>
                <SetDefault />
            </React.Fragment>
        ) ;
    }
}

次にデフォルト値で処理を行う React コンポーネント（set_default.js）です。

import React  from "react" ;

export default class SetDefault extends React.Component {
	constructor( props ){
        super( props ) ;
        this.state = {
                   name : this.props.name,
                   age : this.props.age,
                   gender : this.props.gender,
        } ;
    }
    render(){
        return(
            <React.Fragment>
                <div>名前は[{this.state.name}]です。</div>
                <div>年齢は[{this.state.age}]です。</div>
                <div>性別は[{this.state.gender}]です。</div>
            </React.Fragment>
        ) ;
    }
}

SetDefault.defaultProps = {
    name: "Lightgauge",
    age: 30,
};

上記の例では React コンポーネント TestSetDefault に Props として 何も渡していませんが、defaultProps でデフォルト値「name」と「age」を設定しているので、その値を使って React コンポーネントが描画されます。
（gender は defaultProps でも指定されていないのでカラになっています。）

以下が呼び出した結果ブラウザーに表示されたものです。

名前は[Lightgauge]です。
年齢は[30]です。
性別は[]です。

まとめ

defaultProps を使えばロードされる側の React コンポーネント でデフォルト値を設定できるので、万が一渡されなかった場合でも描画を正常に行うことができます。