데이터를 통해 구성 요소를 반복하는 반응과

Question

데이터는 다음과 같습니다 복잡한 행 구조를 maping :

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> 

이미지/제목/가격은 카드에 전달 될 수 있습니다 구성 요소.

나는 for 루프를 만들었지 만 곧 그 괴물이 if/else처럼 보이기 시작했습니다.

이 경우 map을 사용할 수 있습니까? 이런 종류의 템플릿을 다루기위한 더 나은 라이브러리가 있습니까? 이제 코드를 청소하고 적절한 스타일을 적용 할 필요가 http://codepen.io/PiotrBerebecki/pen/rrdBjX

:

Answer 1

이 원하는 DOM 그리드를 제공한다.

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 및 3 카드 행 구성 요소.