例えば下記のようなComponentがあります。Reactの仕様上複数の要素が存在するComponentは必ず親の要素がないといけない様なのでComponentのChildはpタグ二つをdivタグで括っています。

js
1class Parent extends Component {
2
3    render() {
4        return (
5            <div>
6                <Child />
7            </div>
8        )
9    }
10}
11
12class Child extends Component {
13
14    render() {
15        return (
16            <div>
17                <p>child</p>
18                <p>child</p>
19            </div>
20        )
21    }
22}

最終的にComponentのParentは下記と同等のComponentになります。

JavaScript
1class Parent extends Component {
2
3    render() {
4        return (
5            <div>
6                <div>
7                    <p>child</p>
8                    <p>child</p>
9                </div>
10            </div>
11        )
12    }
13}

結果pタグを二重のdivタグで括ることになってしまいます。これは極端な例で実際はChildいらないですが、動的に子Componentを変えたい時とかで似た様なケースってあると思います。その場合この二重になってしまう問題がありますよね！？別に気にしなければいいのかも知れませんが、私は気になってしまいます。こちら解決するいい方法ってないでしょうか？

HayatoKamono

2018/04/22 14:43 編集

> Reactの仕様上Componentは必ず親がいないといけない様なのでComponentのChildはpタグをdivタグで括ってます。 > 動的に子Componentを変えたい時とかで似た様なケースってあると思います。その場合この二重になってしまう問題がありますよね！？これらの意味がよく分かりませんでした。回答はしたのですが、もし、的外れな回答になっている場合は、上記について補足説明をお願いいたします。

退会済みユーザー

2018/04/22 14:51

すいません。私の認識が間違っておりまして、正確には複数の要素が存在する場合親の要素がないといけないの間違いでした。一応他の方の参考になるかも知れないので質問を修正します。

HayatoKamono

2018/04/22 14:55

なるほど。では、自分の回答が質問の答えになるかと思います。

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

回答1件

ベストアンサー

Reactの仕様上Componentは必ず親がいないといけない様なのでComponentのChildはpタグをdivタグで括ってます。

これがいまいち分かりませんでした。

    render() {
        return (
            <div>
                <p>child</p>
            </div>
        )
    }

であれば、

    render() {
        return (
            
             <p>child</p>
            
        )
    }

で、大丈夫ですよね？

class Child extends Component {

  render() {
    return (
        <div>
          <p>child</p>
          <p>child</p>
        </div>
    )
  }
}

複数の要素がこのように存在する場合に、別の要素で囲まないといけないですよねっていう話であれば、以下のように出来ます。

class Child extends Component {

  render() {
    return (
        [
          <p>child</p>,
          <p>child</p>
        ]
    )
  }
}

import { Fragment } from 'react';

class Child extends Component {

  render() {
    return (
        <Fragment>
          <p>child</p>
          <p>child</p>
        </Fragment>
    )
  }
}

今、示した２つの例では、<div>タグのようなものは一切生成されないので、
イメージとしては以下のようになります。

class Parent extends Component {

    render() {
        return (
            <div>
                <p>child</p>
                <p>child</p>
            </div>
        )
    }
}