Question

数据如下所示：

const items = [
  { image: "http://loremflickr.com/320/320/sport-car?random=1", title: "BMW 545", price: "6.500$" },
  { image: "http://loremflickr.com/320/320/sport-car?random=2", title: "Mercedes GL", price: "16.500$" },
  { image: "http://loremflickr.com/320/320/sport-car?random=3", title: "Toyota", price: "16.500$" },
  { image: "http://loremflickr.com/320/320/sport-car?random=4", title: "Porsche", price: "16.500$" },
  { image: "http://loremflickr.com/320/320/sport-car?random=5", title: "VW Golf", price: "16.500$" },
  { image: "http://loremflickr.com/320/320/sport-car?random=6", title: "Infinity GS", price: "16.500$" },
  { image: "http://loremflickr.com/320/320/sport-car?random=7", title: "Ford GT", price: "16.500$" },
  { image: "http://loremflickr.com/320/320/sport-car?random=8", title: "Mitsubishi Lancer", price: "16.500$" },
  { image: "http://loremflickr.com/320/320/sport-car?random=9", title: "Fiat Punto", price: "16.500$" },
  { image: "http://loremflickr.com/320/320/sport-car?random=10", title: "Pegaout Corsa", price: "16.500$" },
  { image: "http://loremflickr.com/320/320/sport-car?random=11", title: "Open Corsa", price: "16.500$" },
  { image: "http://loremflickr.com/320/320/sport-car?random=12", title: "VW Passat", price: "16.500$" }
]

最终结构应如下所示：

  <div className="Grid">
    <div className="Grid-cell u-size1of2"><Card type="double"/></div>
    <div className="Grid-cell u-size1of2"><Card type="double"/></div>
  </div>
  <div className="Grid">
    <div className="Grid-cell u-size1of4"><Card/></div>
    <div className="Grid-cell u-size2of4"><Card type="double"/></div>
    <div className="Grid-cell u-size1of4"><Card/></div>
  </div>
  <div className="Grid">
    <div className="Grid-cell u-size1of2"><Card type="double"/></div>
    <div className="Grid-cell u-size1of2"><Card type="double"/></div>
  </div>
  <div className="Grid">
    <div className="Grid-cell u-size1of4"><Card/></div>
    <div className="Grid-cell u-size2of4"><Card type="double"/></div>
    <div className="Grid-cell u-size1of4"><Card/></div>
  </div>
  <div className="Grid">
    <div className="Grid-cell u-size1of2"><Card type="double"/></div>
    <div className="Grid-cell u-size1of2"><Card type="double"/></div>
  </div>

image / title / price可以传递给Card组件。

我开始创建一个for循环，但很快就开始看起来像if/else的怪异。

是否可以使用map？还是有一个更好的库来处理这种模板？

Answer 1

这应该提供所需的DOM网格：http://codepen.io/PiotrBerebecki/pen/rrdBjX

您现在需要清理代码并应用适当的样式。

class App extends React.Component {
  render() {   
    const GridArrays = {};

    items.forEach((item, index, array) => {
      if (index % 5 === 0) {
        GridArrays[Object.keys(GridArrays).length] = array.slice(index, index + 2);
      } else if (index % 5 === 2) {
        GridArrays[Object.keys(GridArrays).length] = array.slice(index, index + 3);
      }
    });

    const renderGrids = Object.keys(GridArrays).map(key => {
      if (Number(key) % 2 === 0) {
        return <TwoCars cars={GridArrays[key]} />;
      } else {
        return <ThreeCars cars={GridArrays[key]} />;
      }
    });

    return (
      <div>
        {renderGrids}
      </div>
    );
  }
}


class TwoCars extends React.Component {
  render() {   
    const renderTwoCars = this.props.cars.map((car, index) => {
      return (
        <div className="grid-cell u-size1of2">
          <Card type="double" image={car.image} title={car.title} price={car.price} />
        </div>
      );
    });  

    return (
      <div className="grid-wrapper">
        {renderTwoCars}
      </div>
    );
  }
}


class ThreeCars extends React.Component {
  render() {   
    const renderThreeCars = this.props.cars.map((car, index) => {
      return (
        <div className={index % 2 === 0 ? "grid-cell u-size1of4" : "grid-cell u-size2of4"}>
          <Card image={car.image} title={car.title} price={car.price} type={index % 2 !== 0 ? 'double' : ''} />
        </div>
      );
    });  

    return (
      <div className="grid-wrapper">
        {renderThreeCars}
      </div>
    );
  }
}


class Card extends React.Component {
  render() { 
    let style = this.props.type === 'double' ? 'double' : 'single';

    return (
      <div className={`card-${style}`}>
        <div className={`image-${style}`}>
          <img className={`img-${style}`} src={this.props.image} />
        </div>
        <div className={`desc-${style}`}>
          <h4>{this.props.title}</h4>
          <p>{this.props.price}</p>
        </div>
      </div>
    );
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Answer 2

如果是我制作这个应用程序，我要做的就是再制作三个组件。一个TwoCardRow组件和一个ThreeCardRow组件，然后我创建一个容器组件，它的工作就是将你在那里分别组成的数组分成一个循环中的两个和三个组，然后传递适当数量的数组项那两个和三个卡片行组件。

反应组件迭代数据并映射复杂的行结构

2 个答案: