如何在同一時間映射兩個數組？

Question

我有兩個數組，一個是url，另一個是內容。 他們看起來像這樣：

const link = { 'www.test0.com', 'www.test1.com', 'www.test2.com' } 
 
const content = { 'this is test0 content', 'this is test1 content', 'this is test2 content' }

我該如何映射兩個陣列上在同一時間，在我的新創建的元素用自己的價值？

我需要使用我的reactplayer的url值和內容值作爲播放器下方的文本。

因此，它應該是這個樣子：

<Reactplayer url"link0" /> 
 
<ControlLabel>content0</ControlLabel>

這可能嗎？什麼是更好的設置方法？

Answer 1

使用第二個參數map（它是當前元素的索引），可以訪問第二個數組的正確元素。

const link = [ 'www.test0.com', 'www.test1.com', 'www.test2.com' ]; 
const content = [ 'this is test0 content', 'this is test1 content', 'this is test2 content' ] 

const players = link.map((value, index) => { 
    const linkContent = content[index]; 
    return (
    <div> 
     <Reactplayer url="{value}" /> 
     <ControlLabel>{linkContent}</ControlLabel> 
    </div> 
); 
}); 

---

這是zip方法，它可與各種庫，完美的候選人，如Lodash或Rambda，如果你有這些在你的項目之一。

const players = _.zip(link, content).map((value) => { 
    return (
    <div> 
     <Reactplayer url="{value[0]}" /> 
     <ControlLabel>{value[1]}</ControlLabel> 
    </div> 
); 
}); 

Answer 2

你會好起來讓它爲：

const data = [ 
    { link: "www.test0.com", text: "this is test0 content" }, 
    { link: "www.test1.com", text: "this is test1 content" } 
]; 

你會然後渲染內容，如：

render() { 
    var links = []; 
    for (var i = 0; i < data.length; i++) { 
     var item = data[i]; 
     links.push(<div><Reactplayer url={item.link}/><ControlLabel>{item.text}</ControlLabel></div>); 
    } 

    return (<div>{links}</div>); 
} 

請注意，這是未經測試的代碼，因爲我沒有一個JSX項目目前設置爲可以測試它。