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

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

ただいまの
回答率

90.75%

  • JavaScript

    15275questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • React.js

    708questions

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

reactで動的に子Componentを変えるとタグが二重になってしまうのが気になる。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 167

masuo

score 210

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

class Parent extends Component {

    render() {
        return (
            <div>
                <Child />
            </div>
        )
    }
}

class Child extends Component {

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

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

class Parent extends Component {

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


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • HayatoKamono

    2018/04/22 23:42 編集

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

    キャンセル

  • masuo

    2018/04/22 23:51

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

    キャンセル

  • HayatoKamono

    2018/04/22 23:55

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

    キャンセル

回答 1

checkベストアンサー

+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>
    )
  }
}

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

class Parent extends Component {

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

 参考

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/22 23:55

    ご回答ありがとうございます。
    なるほど、そんな方法があったのですね。ドキュメントまでありがとうございます。

    キャンセル

  • 2018/04/22 23:57

    `[]`react16.0からで、`<Fragment>`は16.2からなのでバージョンにお気をつけくださいませ。それ以前はやはり、`<div>`のようなもので囲う必要があります。

    キャンセル

  • 2018/04/23 00:02

    補足ありがとうございます。😀
    私は16.2だったのでFragmentを使いたいと思います。

    キャンセル

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15275questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • React.js

    708questions

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