Reactでdomを表示させる時の注意点

Reactのrenderメソッドを使ってdomを表示させようとしてもエラーが表示されてしまうケースがある。

エラーが発生するケースは、domがなく文字列だけ出力する場合のエラー

class HelloMessage extends React.Component {
  render() {
    return (
        Hello {this.props.name}
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Hoge" />,
  document.getElementById('test')
);

エラーの内容は、「Unexpected token, expected , 」という内容である。

悩んでしまったので、そこで、「''」で出力部分を囲んでみた。

class HelloMessage extends React.Component {
  render() {
    return (
      'Hello {this.props.name}'
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Hoge" />,
  document.getElementById('test')
);

確かに出力されるけど、Hello {this.props.name}と出力される。

そりゃーそうでしょうねぇー。

色々試行錯誤してみると、やっぱりというか、htmlタグで囲めば解決した。

class HelloMessage extends React.Component {
  render() {
    return (
      <div>Hello {this.props.name}</div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Hoge" />,
  document.getElementById('test')
);

出力結果は、Hello Hogeなんですが、htmlタグで囲みたくないケースだってあると思うんだけど、そういう場合はどうすればいいんだろうね。

謎。