如何將數據迭代到不同的組件/ div

Question

在react和redux中，我試圖將rss數據從新聞網站迭代到不同的組件/ div。我不知道如何解釋這個

基本上我有一個主容器有3行的div（組件），每個div的結構是不同的。第一行div有其他3個大小相同的div，第二行有兩個，第三行有一個。 this is what it looks like

我想將數據傳遞給每個div。例如，我有10個來自api調用的數據，我希望第一行的div有3個數據（數據1,2,3），因爲它有3個div，第二行有2個數據（數據4,5）最後一行有1個數據（數據6），然後返回到第一行。

我試圖從主容器傳遞數據到3個容器（div），但它沒有按照我想要的方式。

我的主要容器組件看起來是這樣的：

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 pro ps像這樣：

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> 

    ); 
}