Syntax Error.

React でコンポーネントを作ろうとしたらうまく動いてないので Developer Tools を見てみる Adjacent JSX elements must be wrapped in an enclosing tag とエラーが起きていました。その場合の問題点と修正方法についてです。

こんなコンポーネントだとダメ

このエラーは、次のようなコンポーネントを作ろうとすると出ます。

var MyComponent = React.createClass({
  render: function() {
    return (
      <div>first</div>
      <div>second</div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('container')
);

やりたいことは、「2つの div 要素をもつ MyComponent」というコンポーネントを、container に作りたい、というとてもシンプルなことです。

何がいけないのか？

なぜエラーが出るかというと、Reactで作成するコンポーネントは、 トップレベル（一番親となる階層）の要素を一つにする必要があるから です。

先ほどの MyComponent を見ると、2つの div 要素がトップレベルで並んでることがわかります。

<div>first</div>   <-- 2つの要素が
<div>second</div>  <-- トップレベルで並んでしまっている

対処法

なので、次のようにさらに上の階層を作ってまとめてあげる（ラップしてあげる）とエラーが出なくなります。

var MyComponent = React.createClass({
  render: function() {
    return (
      <div>                   <-- 例えばdiv要素で囲んであげる
        <div>first</div>
        <div>second</div>
      </div>
    );
  }
});

ひとこと

まだ React 触り始めたばかりですが、JSX だと Emmet 使えるし、なかなか好きになれそうです。