ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

React.Fragmentという最終兵器(またはリーサル・ウェポン)

少し前にReactでrenderを使う時に注意点について書いた。

jumbomonaca.hatenablog.com

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を使ってほしとのことである。

というか、最初からこのやり方を紹介しておけよって突っ込みたくなった。