【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>
を、
<> </>
にするだけだ。
しかし、個人的には知らない人がコードを見ると何じゃこれってなる為、