如何同时映射两个数组？

Question

我有两个数组,一个是网址,另一个是内容.它们看起来像这样:

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