りゅうじの学習blog

学習したことをアウトプットしていきます。

2022年3月3日 React実践の教科書 モダンJavaScriptの機能に触れる Props~

React

Propsとは

どんなときに使うか

よくある例ですと、文字を通常は黒文字でエラー時は赤文字にする仕様の場合です。

Propsを使わないと

こういった問題はPropsを使う事で解決できます。

Propsを学ぶ下準備

前回のコードにピンク色の文字を追加してみます。

App.jsx

export const App = () => {
  // onClickイベント時に発火する関数を定義しています。
  const onClickButton = () => {
    alert();
  };
  // CSSオブジェクト
　  const contentStyle = {
    color: "blue",
    fontSize: "20px"
  };
  // ピンク用に追加
  const contentPinkStyle = {
    color: "pink",
    fontSize: "20px"
 };

  return(
    <>
     {console.log("test")} <= {}で囲う事でJavascriptも記述できます。
     <h1 style={{ color: "red" }}>こんにちは！</h1>
     <p style={contentStyle}>React学習中です。</p>
     <p style={contentPinkStyle}>学習を継続しています。</p>
　　　　　　　　　　// {}で囲って関数を実行させるのをonClickイベント時に発生させる記述です。
     <button onClick={onClickButton}>ボタン</button> 
    </>
 );
};
  • この書き方でも実現はできますが似たようなコードを書くのは冗長です。

色とテキストをPropsとして受け取って色付きの文字を返すコンポーネントを作成していきます。

f:id:ryujisurf55:20220304002944p:plain

App.jsxから青色用スタイルとpタグ部分をColoredMessage.jsxに持ってきます。

ColoredMessage.jsx

export const ColoredMessage = () => {
    contentStyle = {
      color: "blue",
      fontSize: "20px"
    };
  return(
    <>
    <p style={contentStyle}>React学習中です。</p>;
    </>
  );
};

切り出しができたのでApp.jsxの不要な部分を削除してインポートしていきます。

App.jsx

import { ColoredMessage } from "./components/ColoredMessage"; // 追加

export const App = () => {
  // onClickイベント時に発火する関数を定義しています。
  const onClickButton = () => {
    alert();
  };
  // CSSオブジェクト
　  const contentStyle = {
    color: "blue",           <= 削除します。
    fontSize: "20px"
  };
  // ピンク用に追加
  const contentPinkStyle = {
    color: "pink",
    fontSize: "20px"
 };

  return(
    <>
     {console.log("test")} <= {}で囲う事でJavascriptも記述できます。
     <h1 style={{ color: "red" }}>こんにちは！</h1>
     <p style={contentStyle}>React学習中です。</p>　  <= 削除します。
     <ColoredMessage />                           <= 追加
     <p style={contentPinkStyle}>学習を継続しています。</p>
　　　　　　　　　　// {}で囲って関数を実行させるのをonClickイベント時に発生させる記述です。
     <button onClick={onClickButton}>ボタン</button> 
    </>
 );
};
  • 表示は変わらないが React学習中です。をコンポーネントとして切り出せました。

Propsの使い方

  • ColoredMessage.jsxと App.jsxの両方を修正する必要があります。
  • 渡す側(App.jsx)のコンポーネントのタグに任意の名称つけてPropsを渡します。
  • 今回は、色とメッセージをPropsとして渡したいので color と message としています。
  • = の後に実際に渡す値を記述します。

colorとmessageをpropsとして渡す

App.jsx

import { ColoredMessage } from "./components/ColoredMessage"; // 追加

export const App = () => {
  // onClickイベント時に発火する関数を定義しています。
  const onClickButton = () => {
    alert();
  };
  
  // ピンク用に追加
  const contentPinkStyle = {
    color: "pink",
    fontSize: "20px"
 };

  return(
    <>
     {console.log("test")} <= {}で囲う事でJavascriptも記述できます。
     <h1 style={{ color: "red" }}>こんにちは！</h1>
     <ColoredMessage color="blue" message="React学習中" />  <=追加                    
     <p style={contentPinkStyle}>学習を継続しています。</p>  <= 追加
　　　　　　　　　　// {}で囲って関数を実行させるのをonClickイベント時に発生させる記述です。
     <button onClick={onClickButton}>ボタン</button> 
    </>
 );
};

ColoredMessage.jsx

export const ColoredMessage = (props) => {
     console.log(props); => {color: "blue", message: "React学習中"}
     contentStyle = {
      color: propscolor,　　　  <= 追加　　　　　　　                
      fontSize: "20px"
    };

    };

  return(
    <>
    <p style={contentStyle}>{props.message}</p>;
    </>
  );
};
  • colorの値をpropsで受け取ったものに変更しています。
  • pタグの中にpropsで受け取ったmessageを表示しています。
  • jsx内でJavaScriptを記述しているので{}で囲いましょう。

ピンクの文字も表示してみます。

App.jsx

import { ColoredMessage } from "./components/ColoredMessage";

export const App = () => {
  // onClickイベント時に発火する関数を定義しています。
  const onClickButton = () => {
    alert();
  };

  return(
    <>
     {console.log("test")} <= {}で囲う事でJavascriptも記述できます。
     <h1 style={{ color: "red" }}>こんにちは！</h1>
     <ColoredMessage color="blue" message="React学習中" />                          
     <p style={contentPinkStyle}>学習を継続しています。</p>   <= 削除
     <ColoredMessage color="pink" message="学習を継続しています。 />
　　　　　　　　　　// {}で囲って関数を実行させるのをonClickイベント時に発生させる記述です。
     <button onClick={onClickButton}>ボタン</button>
    </>
 );
};

ピンクもpropsを使って表示される事ができました。

以上がpropsの使い方です。

最後に

読んでくださった方、ありがとうございます。

参考

本書のみ。