Как я могу сопоставить два массива одновременно?

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

Как я могу отобразить по обоим массивам одновременно и использовать их значение в моей недавно созданного элемента?

Мне нужно использовать значение 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 в настоящее время настроить, что я могу проверить его.