如何将数据迭代到不同的 components/divs

Question

在 react 和 redux 中，我试图将 rss 数据从新闻网站迭代到不同的 components/divs。我不太确定如何解释这个

基本上我有一个主容器，它有 3 行 divs（组件），每个 divs 的结构是不同的。第一行 div 有另外 3 个 div 大小相同，第二行有两个，第三行有一个。 this is what it looks like

我想将数据传递给每个div。例如，我有来自 api 调用的 10 个数据，我希望 divs 的第一行有 3 个数据（数据 1,2,3），因为它有 3 个 divs ，第二行有 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 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>

     );
}

如何将数据迭代到不同的 components/divs

How to iterate data to different components/divs

javascript

reactjs

redux

react-redux