異なるコンポーネント/ divにデータを反復する方法

Question

reactとreduxでは、ニュースWebサイトからさまざまなコンポーネント/ divにrssデータを反復しようとしています。私は本当にこれを説明する方法をよく分かりません

基本的に私は3行のdivs（コンポーネント）を持ち、各divの構造が異なります。 divの最初の行には同じサイズの他の3つのdivがあり、2つ目には2つがあり、3つ目には1つのdivがあります。 this is what it looks like

データを各divに渡したいとします。例えば、私はAPIコールから10データを持っています、そして、私はdivsの最初の行に3 divsを持っているので3データ（データ1,2,3）を持って、2番目の行は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プロを渡すことができます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> 

    ); 
}