前提

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>

行動規範の内容に同意します

回答2件

ベストアンサー

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

試していないですが、こうですかね。。。React.renderをそもそも２回連続で読んだり、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

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

行動規範の内容に同意します

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

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

投稿2017/09/02 05:10

amotarao

総合スコア7