2017-12-29 22 views
0

配列内のいくつかの項目を、各行の3列のグリッドにマップしたいと考えています。今はグリッド全体をハードコードしていますが、これを自動的に行うのは簡単なことです。ここでNativeBase:行に列を生成する

<Grid> 
    <Col> 
    <Row>Cel 1</Row> 
    <Row>Cel 2</Row> 
    <Row>Cel 3</Row> 
    </Col> 
    <Col> 
    <Row>Cel 4</Row> 
    <Row>Cel 5</Row> 
    <Row>Cel 6</Row> 
    </Col> 
    <Col> 
    <Row>Cel 4</Row> 
    <Row>Cel 5</Row> 
    <Row>Cel 6</Row> 
    </Col> 
    <Col> 
    <Row>Cel 4</Row> 
    <Row>Cel 5</Row> 
    <Row>Cel 6</Row> 
    </Col> 
    <Col> 
    <Row>Cel 4</Row> 
    <Row>Cel 5</Row> 
    <Row>Cel 6</Row> 
    </Col>   
</Grid> 

多くの気圧を行いませんrenderメソッドは、次のとおりです。

これは、最終結果がどのように見えるかです。私はこの問題についてどのように始めるべきかわかりません。あなたのイメージが更新されますとき(挿入、削除または削除)、Reactは再びrenderコンポーネントを再しますので、可能な限り

render() { 
    let images = [ 
     Images.grid1, 
     Images.grid2, 
     Images.grid3, 
     Images.grid4, 
     Images.grid5, 
     Images.grid6, 
     Images.grid7, 
     Images.grid8, 
     Images.grid9 
    ]; 

return images.map(link => { 
    return (
     <Grid> 
     <Row> 
     <Col>link</Col> 
     <Col>link</Col> 
     <Col>link</Col> 
     </Row> 
     <Row> 
     <Col>link</Col> 
     <Col>link</Col> 
     <Col>link</Col> 
     </Row> 
     </Grid> 
    ); 
    }); 
} 

答えて

1

あなたのイメージの配列はstateまたはpropsに格納する必要があります。

各行に3つの列を表示するには、Images配列を次のように再構成する必要があります。

gridArray = [ 
    [image1, image2, image3], 
    [image4, image5, image6], 
    [image7, image8, image9], 
]; 

CodeSandboxに関する私の実例をこのリンクhttps://codesandbox.io/s/jly9332lzyで見てください。 CodeSandbox上の例では

私はオンラインサンドボックス上のエラーを回避するためにulliからColdivからGrid、からコンポーネントを変更します。コンポーネントをGrid,、Colに変更するだけでコードを編集してください。すべてのコードが変更されます。以下は

あなたの問題

import React from "react"; 
import { render } from "react-dom"; 

class YourComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    // Your source data 
    this.state = { 
     images: [ 
     "Image 1", 
     "Image 2", 
     "Image 3", 
     "Image 4", 
     "Image 5", 
     "Image 6", 
     "Image 7", 
     "Image 8", 
     "Image 9", 
     ] 
    }; 
    } 

    // this method will return structured array like this. 
    // gridArray = [ 
    // [image1, image2, image3], 
    // [image4, image5, image6], 
    // [image7, image8, image9], 
    // ]; 
    imagesArrayToGridArray(totalColumns) { 
    let gridArray = [[]]; 

    let countColumns = 1; 
    for (var i = 0; i < this.state.images.length; i++) { 
     gridArray[gridArray.length - 1].push(this.state.images[i]); 
     if (countColumns <= totalColumns) { 
     countColumns++; 
     } 
     if (countColumns > totalColumns && i !== this.state.images.length - 1) { 
     countColumns = 1; 
     gridArray.push([]); 
     } 
    } 

    return gridArray; 
    } 

    // return React Components like 
    // <Row> 
    // <Col>Image 1</Col> 
    // <Col>Image 2</Col> 
    // <Col>Image 3</Col> 
    // </Row> 
    // <Row> 
    // <Col>Image 4</Col> 
    // <Col>Image 5</Col> 
    // <Col>Image 6</Col> 
    // </Row> 
    // <Row> 
    // <Col>Image 7</Col> 
    // <Col>Image 8</Col> 
    // <Col>Image 9</Col> 
    // </Row> 
    renderGrid(gridArray) { 
    return gridArray.map(row => (
     <Row>{row.map(col => (<Col>{col}</Col>))}</Row> 
    )); 
    } 

    // render 
    render() { 
    let gridArray = this.imagesArrayToGridArray(3); 
    return <Grid>{this.renderGrid(gridArray)}</Grid>; 
    } 
} 

render(<YourComponent />, document.getElementById("root")); 

を解決し、それが今ではすべてがうまくいく、それだ私のコードです。

+0

ありがとうございます、これは要求されたとおりに動作します – Fullhdpixel

+0

小道具なし。それが私の喜びだった。 –

関連する問題