React.Fragmentという最終兵器(またはリーサル・ウェポン)
少し前にReactでrenderを使う時に注意点について書いた。
renderメソッドを使う場合は、domで囲むか、false、nullまたは文字列でないとbabelでコンパイルする時にエラーを出してしまう。
例えば、エラーのパターンとして、dom同士を隣接させてしまうとエラーになってしまう。
// NGパターン class HelloMessage extends React.Component { render() { return ( <h1>Hello</h1> <section>This is content</section> ); } }
// OKパターン class HelloMessage extends React.Component { render() { return false; } }
// OKパターン class HelloMessage extends React.Component { render() { return null; } }
// OKパターン class HelloMessage extends React.Component { render() { return "hello"; } }
// OKパターン class HelloMessage extends React.Component { render() { return (<div>Hello</div>); } }
親のdomがないとどうしてもエラーになるということで、ダミーのdivを囲んでコンパイルエラーを今まで回避していた。
// OKパターンだが、ものすごく気持ち悪い class HelloMessage extends React.Component { render() { return ( <div> <h1>Hello</h1> <section>This is content</section> </div> ); } }
そこでどうにか仮のhtmlを置かなくてもエラーを回避することはできないのか、ドキュメントを眺めていた。
そしたらFragmentsというので対応できるみたいだ。
リファンレスでは、例としてtdタグについての言及があったが、別にtdタグ以外にも適用できる。
// OKパターンだが気持ち悪い class HelloMessage extends React.Component { render() { return ( <React.Fragment> <h1>Hello</h1> <section>This is content</section> </React.Fragment> ); } }
リファレンスでは、syntax sugarとして空のhtmlをおくことでも対応できると書いてあった。
が、しかし、全部のツールが対応していないので、React.Fragmentを使ってほしとのことである。
というか、最初からこのやり方を紹介しておけよって突っ込みたくなった。