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タグで囲みたくないケースだってあると思うんだけど、そういう場合はどうすればいいんだろうね。
謎。