Reactコンポーネントの作成

基本コンポーネントの作成

Reactを使ううえで中心となるのはコンポーネントである。表示するコンポーネントを作り、それらを組み合わせて表示する画面を作成する。

JavaScriptファイルの作成

コンポーネントは基本的にJavaScriptで作成する。前回、デフォルトで生成されるAppコンポーネントの構造について説明した。その基本コードをそのまま再利用すれば、比較的簡単に独自のコンポーネントを作成できる。

まず、アプリケーションのsrcフォルダにMyComponent.jsというスクリプトファイルを作成する。そして、次のようにソースコードを書く。これが今回作成するサンプルコンポーネントである。

import React, { Component } from 'react';
 
class MyComponent extends Component {
   
  constructor() {
    super();
    this.msg = "THIS IS MY COMPONENT!";
  }
   
  render() {
    return (
      <h1>{this.msg}</h1>
    );
  }
   
}
 
export default MyComponent;

コンポーネントはComponentクラスを継承して作成する。クラスには必ずrenderメソッドを用意し、JSXを使って作成した表示内容をreturnする。これがコンポーネントの表示になる。

そのほか、今回はconstructorメソッドを用意し、そこで表示するメッセージを初期化できるようにしている。基本的なコンポーネントクラスの構造が分かっていれば、それほど難しいことではないだろう。

値を出力する

ここでは、あらかじめ用意しておいた値をコンポーネントに含めて表示している。コンポーネントで表示する値は次のように用意している。

this.msg = "THIS IS MY COMPONENT!";

コンポーネントでは、thisのプロパティとして値を用意しておくのが基本である。そして、この値は次のようにJSXタグに含める。

<h1>{this.msg}</h1>

{}括弧を使い、ここに値を出力する。この方法を使えば、コンポーネントの必要な場所に値を入れて表示を作っていける。

コンポーネントの組み込み

では、作成したMyComponentを画面に組み込んで表示してみよう。

サンプルとして提供されるindex.jsを開き、ソースコードを次のように修正する。

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import './index.css';
 
ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

これでMyComponentが組み込まれる。Webブラウザで表示を確認すると、「THIS IS MY COMPONENT!」というテキストが表示される。これがMyComponentの表示である。

importの準備

コンポーネントは複数のクラスをインポートして取り込む必要がある。Reactの基本であるreact、react-domは必ず必要である。これに加えて、使用するコンポーネントを取り込む。ここではMyComponentを取り込んでいる。

コンポーネントタグ

コンポーネントはrenderメソッドの第1引数に、JSXを使ったタグとして記述する。ここでは<MyComponent />が該当する。MyComponentクラスを定義しておくだけで、このように独自のタグを使えるようになる。

コンポーネントの利用に必要なのはこれだけである。Reactのコンポーネントは非常にシンプルである。

コンポーネントに値を渡す

MyComponentではmsgというプロパティを用意し、それを含めて表示していた。コンポーネントに値を用意するのは非常に簡単だった。

コンポーネントに値を渡すには?

では、コンポーネントを使うときに、そのコンポーネントへ値を渡して表示を行うにはどうすればよいだろうか。つまり、index.jsのReactDOM.renderでMyComponentを表示するときに、MyComponentに必要な値を渡して表示を配置できる。

これも比較的簡単に行える。まずはコンポーネントの修正である。以下にMyComponent.jsの修正後のソースコードを示す。これを参考に内容を書き直す。

import React, { Component } from 'react';
 
class MyComponent extends Component {
   
  constructor() {
    super();
  }
   
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
      </div>
    );
  }
   
}
 
export default MyComponent;

ここでは次のように表示を用意している。

<h1>{this.props.title}</h1>
<p>{this.props.content}</p>

thisのpropsというプロパティから、titleとcontentの値を取り出している。このpropsは、コンポーネントを呼び出して値を受け取るために使われるプロパティである。ここからtitleとcontentという値を取得して表示している。

また、renderでreturnしている内容を<div>タグにまとめている点も重要である。returnできるのは1つのタグだけである。複数のタグがある場合は、その全体を1つのタグにまとめておく必要があるので注意する。たとえば、

 return (
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
    );

このように書くとエラーになり、正しく動作しない。returnするものは常に1つのタグだけである。

MyComponentに値を渡す

では、修正したMyComponentを使ってみよう。index.jsを次のように修正する。

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import './index.css';
 
ReactDOM.render(
  <MyComponent 
    title="My COMPONENT"
    content="これはオリジナルコンポーネントのサンプルです。" />,
  document.getElementById('root')
);

Webブラウザでタイトルとメッセージを表示できる。

ここではrenderの第1引数として<MyComponent />を指定しているが、このタグの中に次のような属性が追加されている。

<MyComponent title="OO" content="OO"/>

このtitleとcontentという属性が、MyComponent.jsのthis.propsの中にtitleとcontentというプロパティとして追加されていた。このようにコンポーネントタグを使う側では、this.propsに用意するプロパティをコンポーネントタグの属性として指定することで、値を渡すことができる。