質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

2079閲覧

React.jsで1つのコンポーネントを複数回呼び出したい

amotarao

総合スコア7

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/09/02 04:18

前提

React.jsを学び始めているところでございます。
コンポーネントは理解できましたが、
同じコンポーネントを複数回呼び出す方法が分かりません。
また、その検索ワードが思いつきません。

「React コンポーネント 複数」等 検索しましたが、
求めているものにたどり着けませんでした。

やっていること

ブログをお試しで作っています。

  • ヘッダー
  • 複数の記事
  • フッター

このような構成にしようと思っています。
現状、記事コンポーネントを作成しました。以下コード参照願います。

1つの記事につき、1つのコンポーネントを呼び出せばいいことは確実だと思います。
2つの場合は、と思い、2回renderを書いてみましたが、記事2のほうしか表示されませんでした。

どうすれば、2つの記事を表示できるのでしょうか。

よろしくお願いいたします。

html

1<!doctype html> 2<html> 3<head> 4<script src="http://fb.me/react-0.13.3.js"></script> 5<script src="http://fb.me/JSXTransformer-0.13.3.js"></script> 6</head> 7<body> 8 9<script type="text/jsx"> 10var Article = React.createClass({ 11 render: function() { 12 return ( 13 <article> 14 <h1>{this.props.title}</h1> 15 <section> 16 <h2>見出し</h2> 17 <p>本文本文</p> 18 </section> 19 </article> 20 ); 21 } 22}); 23React.render(<Article title="記事1" />, document.body); 24React.render(<Article title="記事2" />, document.body); 25</script> 26 27</body> 28</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

React.render({[<Article title="1"/>, <Article title="2"/>]}, document.body);

試していないですが、こうですかね。。。React.renderをそもそも2回連続で読んだり、React.render()の第一引数にリストを渡すというのは見慣れないので、あってるかどうかわかりませんが。

訂正

どちらも試していないけど。。。

React.render( <main> {[<Article title="1"/>, <Article title="2"/></]} </main> , document.body );
React.render( <main> <Article title="1"/> <Article title="2"/> </main> , document.body );

投稿2017/09/02 05:04

編集2017/09/02 06:23
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

amotarao

2017/09/02 05:11

そちらですとエラーになってしまいました。 ご回答ありがとうございました。
amotarao

2017/09/02 06:29

訂正版ありがとうございました。
guest

0

別コンポーネントを作成し、その中に<Article />を2つ入れることで解決しました。

var Main = React.createClass({ render: function() { return ( <main> <Article title="記事1" /> <Article title="記事2" /> </main> ); } });

投稿2017/09/02 05:10

amotarao

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/09/02 06:20

はい、それが本来の自然なやり方です。
amotarao

2017/09/02 06:26

訂正版もありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問