ホーム » React チュートリアル » React Props

React Props

要約: このチュートリアルでは、React Props と Props システムを使用して React コンポーネント間でデータをやり取りする方法について説明します。

React Props の紹介

React Props は、React アプリケーション内でコンポーネント間でデータをやり取りするためのメカニズムです。

React Props システムの仕組みを説明するために、簡単な React アプリケーションを作成します。このアプリケーションは、本の表紙、タイトル、著者を含む 3 冊の本を表示します。

この book アプリでは、同じ構造の 3 冊の本があります。

  • 表紙の画像
  • 本のタイトル
  • 著者

React では、JSX の同じコピーを返し、表紙画像、本のタイトル、著者を変更できます。

export const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>

      <section>
        <img />
        <h2>Mastering React</h2>
        <p>By Anthony Pham</p>
      </section>

      <section>
        <img />
        <h2>Mastering React</h2>
        <p>By Anthony Pham</p>
      </section>

      <section>
        <img />
        <h2>Mastering React</h2>
        <p>By Anthony Pham</p>
      </section>
    </main>
  );
};Code language: JavaScript (javascript)

ただし、Book という再利用可能なコンポーネントを作成することをお勧めします。Book コンポーネントは、異なる表紙画像、タイトル、著者を表示できる必要があります。

export const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>
      <Book />
      <Book />
      <Book />
    </main>
  );
};Code language: JavaScript (javascript)

問題は、表紙画像、タイトル、著者などのデータを App コンポーネントから各 Book コンポーネントに渡す方法です。これを実現するには、React Props システムを使用できます。

コンポーネント階層

React では、コンポーネント階層とは、React がコンポーネントをネストして木のような構造を形成する方法です。

  • 親コンポーネントは、1 つ以上の他のコンポーネントを含むコンポーネントです。それらはデータを (Props) 子コンポーネントに渡します。
  • 子コンポーネントは、親コンポーネント内にネストされたコンポーネントです。子コンポーネントは、Props 経由で親コンポーネントからデータを受け取ります。
  • 兄弟コンポーネントは、同じ親コンポーネントを共有するコンポーネントです。それらは、コンポーネント階層内で同じレベルにあります。

次の図は、これから作成する React アプリケーションのコンポーネント階層を示しています。

react component hierarchy

React アプリの作成

最初に、Windows ではコマンドプロンプトを、Unix 系システムでは端末を開きます。

次に、npx create-react-app コマンドを実行して book という新しい react アプリを作成します。

npx create-react-app bookCode language: JavaScript (javascript)

次に、お気に入りのコードエディタでプロジェクトディレクトリを開き、src ディレクトリ以下のすべてのファイルを削除します。

次に、次のコードを使用して新しい index.js ファイルを作成します。

import ReactDOM from 'react-dom/client';
import App from './App.js';

const el = document.querySelector('#root');
const root = ReactDOM.createRoot(el);

root.render(<App />);Code language: JavaScript (javascript)

index.js ファイルは、App コンポーネントを画面に表示します。

次に、App コンポーネントを格納する同じ src ディレクトリに App.js ファイルを作成します。

const App = () => {
   return <h1>Book App</h1>;
};

export default App;Code language: JavaScript (javascript)

App コンポーネントは Book コンポーネントを 3 つ作成し、画面に表示します。しかし、今のところ、テキストを含む <h1> タグを返します。

App.js ファイルでは、デフォルトエクスポートを使用

export default App;Code language: JavaScript (javascript)

App コンポーネントをファイルにインポートすると、中括弧を使用せずに、その名前を直接使用できます。

import App from './App.js';Code language: JavaScript (javascript)

デフォルトエクスポートを使用せず、その代わりに名前付きエクスポートを使用する場合

export const App = () => {
  // ...
}Code language: JavaScript (javascript)

次に、インポート時に波括弧で囲む必要があります。

import { App } from './App.js';Code language: JavaScript (javascript)

1つのモジュールには1つのデフォルトエクスポートのみ持つことができることに注意してください。

最後に、ターミナルで次のコマンドを実行してブックを実行します。

npm startCode language: JavaScript (javascript)

Webブラウザに次の画面が表示されます。

再利用可能なブックコンポーネントの作成

最初に、srcディレクトリにBook.jsファイルを作成します

const Book = () => {
   return <p>Book</p>;
};

export default Book;Code language: JavaScript (javascript)

Bookコンポーネントは単純な<p> 要素を返します。後でそれを修正します。

次に、AppコンポーネントにBookコンポーネントをインポートし、Appコンポーネントを変更してBookコンポーネントを返します。

import Book from './Book';

const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>
      <Book />
      <Book />
      <Book />
    </main>
  );
};

export default App;Code language: JavaScript (javascript)

このコンポーネントで:

1) Bookコンポーネントをインポートする

import Book from './Book';Code language: JavaScript (javascript)

2) JSXでBookコンポーネントをレンダーする

<Book />Code language: JavaScript (javascript)

3番目に、AppコンポーネントからBookコンポーネントにpropsを使用してデータを渡す

import Book from './Book';

const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>
      <Book title="Mastering React" author="Anthony Pham" />
    </main>
  );
};

export default App;Code language: JavaScript (javascript)

Appコンポーネントで、Bookコンポーネントのtitleとauthorpropsを対応する文字列に設定します。

<Book title="Mastering React" author="Anthony Pham" />Code language: JavaScript (javascript)

Bookコンポーネントで、これらの値をpropsオブジェクトのプロパティとして受け取ることができます。propsオブジェクトはコンポーネント関数の引数です。

const Book = (props) => {
  return <p>Book</p>;
};

export default Book;Code language: JavaScript (javascript)

propsオブジェクトを通じて、コンポーネント内でtitleとauthorデータにアクセスできます

const book = (props) => {
  return (
    <section>
      <h2>{props.title}</h2>
      <p>By {props.author}</p>
    </section>
  );
};

export default book;Code language: JavaScript (javascript)

コードをより簡潔にするために、オブジェクトデストラクチャリングを使用して、propsオブジェクトのプロパティを個々の変数にデストラクチャリングできます。

const book = ({title, author}) => {
  return (
    <section>
      <h2>{title}</h2>
      <p>By {author}</p>
    </section>
  );
};

export default book;Code language: JavaScript (javascript)

アプリはWebブラウザ上で次のように表示されます。

4番目に、返されるJSXにさらに2つのBookコンポーネントを追加するようにAppコンポーネントを変更しますが、異なるpropsを使用します。

import Book from './Book';

const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>
      <Book title="Mastering React" author="Anthony Pham" />
      <Book title="Practical React" author="Alex Johnson" />
      <Book title="React in Action" author="Bob Climo" />
    </main>
  );
};

export default App;Code language: JavaScript (javascript)

画面に3冊の本がレンダリングされるのがわかります。

Reactアプリに画像を追加

最初に、次のzipファイルをダウンロードしてプロジェクトのディレクトリにあるsrcディレクトリに展開します。

画像のダウンロード

次に、import文を使用してこれらの3つの画像をAppコンポーネントにインポートし、それらをpropsとしてBookコンポーネントに渡します。

import React from 'react';
import Book from './Book';
import MasteringReact from './mastering react.svg';
import PracticalReact from './practical react.svg';
import ReactInAction from './react in action.svg';

const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>
      <div>
        <Book
          title="Mastering React"
          author="Anthony Pham"
          cover={MasteringReact}
        />
        <Book
          title="Practical React"
          author="Alex Johnson"
          cover={PracticalReact}
        />
        <Book
          title="React in Action"
          author="Bob Climo"
          cover={ReactInAction}
        />
      </div>
    </main>
  );
};

export default App;Code language: JavaScript (javascript)

3番目に、Appコンポーネントから渡される画像を表示するようにBookコンポーネントを変更します。

const Book = ({ title, cover, author }) => {
  return (
    <section>
      <img src={cover} alt={title} />
      <h2>{title}</h2>
      <p>By {author}</p>
    </section>
  );
};

export default Book;Code language: JavaScript (javascript)

アプリには3つの画像が表示されますが、かなり大きくなっています。より красивоするために、アプリにCSSスタイルを追加できます。

Reactアプリにstyle.cssを追加

最初に、srcディレクトリに次のコードで新しいstyle.cssファイルを作成します。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  line-height: 1.5;

  /* center*/
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
h1 {
  margin-bottom: 1.5rem;
}

.book-list {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.book-cover {
  width: 150px;
}

.book-title {
  font-size: 1.2rem;
}

.book-author {
  color: gray;
}
Code language: CSS (css)

次に、style.cssファイルをAppコンポーネントにインポートし、AppコンポーネントのJSXを変更してクラス名を含めます。

import React from 'react';
import Book from './Book';
import MasteringReact from './mastering react.svg';
import PracticalReact from './practical react.svg';
import ReactInAction from './react in action.svg';
import './style.css';

export const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>
      <div className="book-list">
        <Book
          title="Mastering React"
          author="Anthony Pham"
          cover={MasteringReact}
        />
        <Book
          title="Practical React"
          author="Alex Johnson"
          cover={PracticalReact}
        />
        <Book
          title="React in Action"
          author="Bob Climo"
          cover={ReactInAction}
        />
      </div>
    </main>
  );
};
Code language: JavaScript (javascript)

3番目に、クラス名をBookコンポーネントのJSXに追加します。

const Book = ({ title, cover, author }) => {
  return (
    <section className="book">
      <img src={cover} alt={title} className="book-cover" />
      <h2 className="book-title">{title}</h2>
      <p className="book-author">By {author}</p>
    </section>
  );
};

export default Book;Code language: JavaScript (javascript)

アプリは期待どおりになります。

React Props App - book app

まとめ

  • Reactプロパティを使用して、親コンポーネントから子コンポーネントにデータを渡します。
このチュートリアルは役に立ちましたか？
React JSX
前へ
React JSX
次へ
React JSXキープロパティ
React JSX Key Prop