MyComponentでは、msgというプロパティを用意してそれを埋め込み表示していました。コンポーネントの中で値を用意する分には、このようにとても簡単に行なえます。

では、コンポーネントを利用するときに、コンポーネントに値を渡して表示を行わせるにはどうすればいいのでしょうか。つまり、index.jsでReactDOM.renderでMyComponentを表示する時に、MyComponentに必要な値を渡して表示をアレンジできないか、ということですね。

これも、実は割と簡単に行えるのです。やってみましょう。まずは、コンポーネント側の修正です。下のリスト欄にMyComponent.jsの修正ソースコードを挙げておきます。これを参考に内容を書き換えて下さい。

ここでは、以下のようにして表示を用意しています。

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

thisの「props」というプロパティからtitleとconentという値を取り出しています。このpropsは、コンポーネントの呼び出し側から値を受け取るのに利用されるプロパティです。ここからtitleとcontentという値を取り出して表示しています。

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

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

このように書くとエラーになりうまく動きません。returnするのは、常に１つのタグだけなのです。

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;