どのようにして2つの配列を同時にマップできますか？

Question

私は2つの配列を持っています.1つはURLを持ち、もう1つはコンテンツを持っています。 は、彼らは次のようになります。

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' }

は、どのように私は同時に両方の配列上にマッピングし、私の新しく作成された要素にその値を使用することができますか？

リアディプレイのURLの値とコンテンツの値をプレーヤの下のテキストとして使用する必要があります。

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

これが可能である：

だからそれは次のようになりますか？これを設定するより良い方法は何でしょうか？

Answer 1

現在の要素のインデックスであるmapの2番目のパラメータを使用すると、2番目の配列の正しい要素にアクセスできます。

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> 
); 
}); 

---

これは、あなたのプロジェクトでそれらのいずれかを持っている場合は、そのようLodashやRambdaなどさまざまなライブラリを使用してご利用いただけますzip方法のための完璧な候補です。

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プロジェクトを持っていないとして、これは未テストコードです現在の設定でテストできます。