如何将数据迭代到不同的组件/div

Question

在react和redux中，我试图将rss数据从新闻网站迭代到不同的组件/div。我真的不知道如何解释这个

基本上我有一个主容器，有3行div(组件)，每个div的结构是不同的。div的第一行有3个相同大小的div，第二行有两个，第三行有一个。这就是它的样子

我想把数据传递给每个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 props:

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>
     );
}