forEach es6在JSX中的地圖

我有一個JavaScript數組，使用array.map呈現組件。爲了能夠使用鍵值對更容易地查找項目，我將此數組切換爲es6 Map，並通過Map從.map切換爲forEach。在forEach裏面，我調用了一個渲染方法，它返回一個React組件，但它沒有被渲染。如何渲染forEach內的組件？forEach es6在JSX中的地圖

<div className='gallery__items'> 
    {resultsByGuid.forEach((result, index) => { 
     key++; 
     this.renderGalleryItem(result, key); 
    })} 
</div>

這裏是renderGalleryItem方法：

renderGalleryItem = (item, index) => { 
    const { gridItemSelected, itemThumbnailRequested } = this.props; 
    return (<GalleryItem key={index} 
     item={item} 
     onClick={gridItemSelected} 
     fetchThumbnailFunc={itemThumbnailRequested} 
    />); 
};

我明白的forEach不返回任何東西，但是否意味着我不能在它裏面呈現？

來源

2016-02-23 thisAnneM

如何將html字符串存儲/追加到您在forEach之後注入的變量中？ – LukeS

使用['Map.prototype.values（）']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values）方法。 – zerkms

那麼，JSX需要一個數組？然後使用'Array.from（resultsByGuid）'並從那裏使用'.map'。 – Bergi

你是對的，forEach不返回任何東西，改用map，它會返回一個JSX組件數組。

地圖將允許您訪問的關鍵，以及：resultsByGuid.map((item, key) => { })

編輯我的急於求成，而不是讀書，你是用Map數據結構道歉。 forEach將不會呈現任何東西，因爲你需要的返回值，你可以實現自己的Array.map像迭代器：

const mapIterator = (map, cb) => { 
    const agg = []; 
    for(let [key, value] of map) { 
    agg.push(cb(value, key)); 
    } 
    return agg; 
}; 

<div className='gallery__items'> 
    {mapIterator(resultsByGuid, (result, index) => { 
    key++; 
    return this.renderGalleryItem(result, key); 
    })} 
</div>

編輯2並感謝@zerkms您指出我應該已經很明顯對我說：

<div className='gallery__items'> 
    {Array.from(resultsByGuid.values()).map((result, index) => { 
    key++; 
    return this.renderGalleryItem(result, key); 
    })} 
</div>

來源

2016-02-23 23:55:04

你指的是什麼「地圖」？ – zerkms

'Array.map' https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map @zerkms –

'resultsByGuid'不是一個數組，它是一個'Map'對象（它沒有'map'方法） – zerkms

如果您在地圖上叫.entries()，你會得到一個插入有序陣列，並將每個鍵/值對包含結構的數組：[key, value]

所以，你可能只是這樣做：

<div className='gallery__items'> 
    {resultsByGuid.entries().map((result) => { 
    return this.renderGalleryItem(result[1], result[0]); 
    })} 
</div>

我還是想知道，如果有一個簡單的解決方案，但。

來源

2017-03-20 00:02:39

另一種選擇，其中options是一個ES6地圖（）..

<select> 
    { 
    [...options].map((entry) => { 
     let key = entry[0] 
     let value = entry[1] 
     return <option key={ key } value={ key }>{ value }</option> 
    }) 
    } 
</select>

來源

2017-06-09 11:59:58 danday74

剛上使用數組解構danday74的例子略有改善。使用ES6地圖的選項：

<select> 
    { 
    [...options].map(([key, value]) => { 
     return <option key={ key } value={ key }>{ value }</option> 
    }) 
    } 
</select>

來源

2018-01-16 10:15:33 BrechtVds

forEach es6在JSX中的地圖

回答

相關問題