☰

マップと結合を使用してReactコンポーネントをレンダリングする方法は？質問する

tag-icon • tag-icon reactjs
マップと結合を使用してReactコンポーネントをレンダリングする方法は？質問する

文字列の配列を表示するコンポーネントが 1 つあります。コードは次のようになります。

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]。

オブジェクトを解釈してレンダリングされる React コンポーネントにする方法がわかりません。何か提案はありますか?

ベストアンサー1

reduce()簡単な解決策は、2 番目の引数を使用せず、前の結果を展開せずに使用することです。

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

reduce()2番目の引数がなければ、インデックス1から開始0 ではなく、React はネストされた配列を問題なく処理します。

コメントで述べたように、2 番目の引数がないと空の配列がスローされるため、少なくとも 1 つの項目を持つ配列にのみこれを使用する必要がありますreduce()。いずれにしても、空の配列に対して「これは空です」などのカスタム メッセージを表示するため、通常はこれが問題になることはありません。

Typescript のアップデート

anyTypescript ( type-unsafe なし) で、React.ReactNode型パラメータ on を使用してこれを使用できます.map()。

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

おすすめ記事