두 배열을 동시에 매핑하는 방법은 무엇입니까?

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 프로젝트를하지 않는 테스트되지 않은 코드는 현재 설정을 테스트 할 수 있습니다.