コンポーネントを作ろう！ (4/5)
作成:2017-04-08 09:29
更新:2017-04-08 09:29
更新:2017-04-08 09:29
■MyComponentに値を渡す
では、修正したMyComponentを利用しましょう。index.jsを下のリスト欄のように修正して下さい。Webブラウザで、タイトルとメッセージが表示されるようになります。
ここでは、renderの第１引数で<MyComponent />を指定していますが、このタグの中に以下のように属性が追加されています。
このtitleとcontentという属性が、MyComponent.jsのthis.props内にtitleとcontentというプロパティとして追加されていたのです。このようにコンポーネントのタグを利用する側では、this.propsに用意するプロパティを、コンポーネントタグの属性として用意することで値を受け渡すことができます。
ここでは、renderの第１引数で<MyComponent />を指定していますが、このタグの中に以下のように属性が追加されています。
<MyComponent title="○○" content="○○" />
このtitleとcontentという属性が、MyComponent.jsのthis.props内にtitleとcontentというプロパティとして追加されていたのです。このようにコンポーネントのタグを利用する側では、this.propsに用意するプロパティを、コンポーネントタグの属性として用意することで値を受け渡すことができます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
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')
);
※関連コンテンツ