我有两个数组，一个包含 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>
这可能吗？什么是更好的设置方法？
使用 的第二个参数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>
);
});
你最好把它作为：
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 项目。