다른 구성 요소/div에 데이터를 반복하는 방법

Question

반응과 비용면에서 뉴스 웹 사이트의 rss 데이터를 다른 구성 요소/div로 반복하려고합니다. 이 방법을 설명하는 방법을 모르겠다.

기본적으로 나는 divs (구성 요소)가 3 행인 기본 컨테이너가 있으며 각 div의 구조가 다릅니다. div의 첫 번째 행에는 크기가 같은 다른 3 개의 div가 있고 두 번째 행에는 두 개가 있고 세 번째 행에는 하나가 있습니다. this is what it looks like

각 div에 데이터를 전달하고 싶습니다. 예를 들어, API 호출에서 10 개의 데이터가 있고 divs의 첫 번째 행에 3 개의 div (데이터 1,2,3)가 있어야하고 두 번째 행에는 2 개의 데이터 (데이터 4,5)가 있어야합니다. 마지막 행에 1 개의 데이터 (데이터 6)가있는 경우 첫 번째 행으로 돌아갑니다.

기본 컨테이너에서 3 개의 컨테이너 (divs)로 데이터를 전달하려고했지만 원하는 방식대로 진행되지 않았습니다.

내 주요 컨테이너 구성 요소는 다음과 같습니다

는

render() { 
const news = this.props.news.map(data => 
    <div> 
    <Container1 data={data} /> 
    <Container2 data={data} /> 
    <Container3 data={data} /> 
    </div> 
); 
return (
    <div className="container"> 
    {news} 
    </div> 
); 

Answer 1

이 같은 뭔가를해야만 사용할 수 있습니다 렌더링

export default class RowExt extends Component { 
    state = { 
    clearData : null 
    }; 
    componentWillReceiveProps = (nextProps)=> { 
    if (this.props.data !== nextProps.data) { 
     this.setState({ 
     clearData: nextProps.data.slice(0, this.props.count) 
     }); 
    } 
    }; 
} 

을 다른이 같은 사용 방법 :

render() { 
return(
    <RowExt count={2}/> 
) 
} 

또는 map 함수에서 색인을 확인하고 count 프로를 전달할 수 있습니다. 추신 :

render() { 

     return(

     <div className="container"> 
      {mapdata && mapdata.map((Row_data,index)=>{ 
       return(

         <RowExt count={index == 0 ? 2 : index == 1 ? 1 :      index == 1 ? 0 } data={Row_data}/> 

       ); 
      })} 
     </div> 

    ); 
}