React – this.props.childrenは必ずしも配列ではない

このエントリーをはてなブックマークに追加

 this.props.childrenが必ずしも配列ではない、ということにドキュメントを読んでいて初めて気づきました。子要素が1個しかない場合には配列ではなく、値そのものが設定されます。ネーミングからしてそれはどうなんだ…と思いますが、配列を初期化するコストを削減しているようですね。「Type of the Children props」でちゃんと解説されています。

 「その為にReact.Children utilitiesを用意してるんだよ!」とも記載されているのですが、実際に試してみたので結果をJSFiddleで御覧ください。

 React.Children.countをちゃんと使えば個数はちゃんと「1」と出力されますが、this.props.children.lengthを使ってしまうと「hello」の5文字として認識されて「5」が出力されてしまうのです。地味にひっかかりそうなトラップなので覚えておかないと…。

Written on March 4, 2015
このエントリーをはてなブックマークに追加