back
コンポーネントを作ろう！ (5/5)
■複数のコンポーネントを使うには？
ここでは、Appコンポーネントを取り除いてMyComponentを表示しましたが、ReactDOM.renderで表示できるのは、常に１つのコンポーネントだけなのでしょうか。複数のコンポーネントを使うことはできないんでしょうか。
これは、もちろんできます。ReactDOM.renderの第１引数には、常に１つのタグしか用意することはできません。が、先ほどMyComponent.jsのrenderでやったように、複数のコンポーネントを１つのタグにまとめることですべてを表示させることができます。
下に、index.jsの修正リストを挙げておきましょう。ここでは、MyComponentを２つ、テーブルでまとめて表示させてあります。けっこうたくさんのタグが使われていますが、全体を<div>で１つにまとめているので問題なく表示できます。
ここで注意したいのは、スタイルの設定です。renderに用意するJSXのタグ内にstyle属性を追加してスタイル設定してはいけません。index.jsならば、別途用意されるindex.cssにスタイルを記述しておくようにしてください。
これは、もちろんできます。ReactDOM.renderの第１引数には、常に１つのタグしか用意することはできません。が、先ほどMyComponent.jsのrenderでやったように、複数のコンポーネントを１つのタグにまとめることですべてを表示させることができます。
下に、index.jsの修正リストを挙げておきましょう。ここでは、MyComponentを２つ、テーブルでまとめて表示させてあります。けっこうたくさんのタグが使われていますが、全体を<div>で１つにまとめているので問題なく表示できます。
ここで注意したいのは、スタイルの設定です。renderに用意するJSXのタグ内にstyle属性を追加してスタイル設定してはいけません。index.jsならば、別途用意されるindex.cssにスタイルを記述しておくようにしてください。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import './index.css';
ReactDOM.render(
<div>
<table>
<tr><td>
<MyComponent
title="My COMPONENT A"
content="これは、オリジナルコンポーネントのサンプルです。" />
</td></tr>
<tr><td>
<MyComponent
title="my component B"
content="this is mycomponent sample..." />
</td></tr>
</table>
</div>,
document.getElementById('root')
);
| << 前へ |