ともブロ。

Rails, Vue.js, React.js, JavaScript等、日々学んだ技術・知識を備忘録的に記していきます。

【React】Fragmentで不要なdivタグを消す

Reactではreturnの後で必ず一つのタグでwrapsされている必要がある。

example)

import React from 'react';

export const Users = () => {
  <div>
    <h1>Hello, world!</h1>
  </div>
}

このようにdivでラップすると、html上でもdivタグが表示され、スマートではないと思っていた。

調べたところ、「Fragment」という便利な機能がやはり備わっていた。 使用方法としては単純で、Fragmentでwrapするだけ。こうすることで、HTML上で不要なタグ(div)が表示されず、よりスマートになる。

import React from 'react';

export const Users = () => {
  <Fragment>
     <h1>Hello, world!</h1>
  </Fragment>
}

Fragmentは短縮できる

Fragmentは更に短縮できる。と言っても

<Fragment>
</Fragment>

を、

<>
</>

にするだけだ。

しかし、個人的には知らない人がコードを見ると何じゃこれってなる為、で良いような気もした。