react.js、JS：関数パラメータ

Question

を介してネストされたオブジェクトプロパティへのアクセスを取得しています。私は気象アプリを実行しています。私はAPIを呼び出して気象データを返信しています。こと：そう

{ 
someprops: someval, 
.... , 
list: [ 
    0: { 
    main:{someprops}, 
    wind:{someprops}, 
    ... 
    }, 
    1: {propsAsAbove}, 
    ... 
    ] 
} 

、私はすべての行で、私はAPIからリストに同じマップの方法をしなければならないテーブルを持っており、それはのように下になります。

<tr> 
    <td>hour </td> 
    {weatherInfo.list.map((item,idx) => { 
     while(idx < displayItemTo && idx >= displayItemFrom){ 
      return(
       <td>{weatherInfo.list[idx].dt_txt.slice(11,19)}</td> 
      ) 
     } 
    })} 
</tr> 
<tr> 
    <td>temp</td> 
    {weatherInfo.list.map((item,idx) => { 
     while(idx < displayItemTo && idx >= displayItemFrom){ 
      return(
       <td>{Math.round(weatherInfo.list[idx].main.temp - 273.85)} &#8451; </td> 
      ) 
     } 
    })} 
</tr> 
<tr> 
    <td>humidity</td> 
    {weatherInfo.list.map((item,idx) => { 
     while(idx < displayItemTo && idx >= displayItemFrom){ 
      return(
       <td>{weatherInfo.list[idx].main.humidity} % </td> 
      ) 
     } 
    })} 
</tr> 

をし、さらにいくつかの行がありますあなたが見ることができるように多くの繰り返しがあるので、私はこのコードを短く簡単にすることを思いつきましたそのためにこのような機能を使用してのアイデアを：

mapList(param){ 
    return() => { 
     const weatherInfo = this.props.forecastData, 
     {displayItemTo,displayItemFrom} = this.state; 

     console.log('hello' + a); 

     weatherInfo.list.map((item,idx) =>{ 
      while(idx < displayItemTo && idx >= displayItemFrom){ 
       return(
        <td key={idx}>weatherInfo.param</td> 
       ) 
     } 
     }); 
    } 
} 

、ここで私は思った、私はパラメータを与えた後に、それは私が必要支えるためにツリーを通過しますので、関数を呼び出すか、それを変更する方法、問題を発見しましたES6からスプレッド演算子を使用して、しかし私はそれを実装する必要があります手がかりを持っていない。

Answer 1

オブジェクトから目的のプロパティを取得する機能を提供します

displayInfo(getter) { 
    const weatherInfo = this.props.forecastData; 
    const { displayItemTo, displayItemFrom } = this.state; 

    return weatherInfo.list 
    .filter((item, idx) => idx < displayItemTo && idx >= displayItemFrom) 
    .map((item, idx) => (
     <td key={idx}>{getter(weatherInfo)}</td> 
    )); 
} 

// use case 
<tr> 
    <td>humidity</td> 
    { displayInfo(info => info.main.humidity) } 
</tr> 

を