[解決済み] reactのコンポーネントをmapとjoinでレンダリングするには？

質問

私は、文字列の配列を表示するコンポーネントを持っています。コードは次のようになります。

React.createClass({
  render() {
     <div>
        this.props.data.map(t => <span>t</span>)
     </div>
  }
})

全く問題なく動作しています。 つまり、もし props.data = ['tom', 'jason', 'chris'] と記述した場合、ページ内のレンダリング結果は tomjasonchris .

そして、すべての名前をカンマで結合したいので、コードを次のように変更します。

this.props.data.map(t => <span>t</span>).join(', ')

しかし，レンダリング結果は [Object], [Object], [Object] .

オブジェクトをどのように解釈すれば、レンダリングされるリアクトコンポーネントになるのかが分かりません。何か提案はありますか？

どのように解決するのですか？

簡単な解決策は reduce() を第二引数なしで、前の結果を広げることなく使用することです。

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}

第2引数なし。 reduce() は はインデックス1から始まります。 となり、React はネストされた配列に完全に対応できるようになります。

コメントで言われているように、少なくとも1つのアイテムを持つ配列にのみこれを使いたいのです、なぜなら reduce() を実行すると、空の配列が投げられます。通常、空の配列に対しては「this is empty」のようなカスタムメッセージを表示したいので、これは問題ではありません。

Typescriptの更新

これをTypescriptで（type-unsafeのない any を使って) React.ReactNode の型パラメータを .map() :

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map<React.ReactNode>(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}