如何使用reactjs动态填充引导网格？

Question

I am trying to display match stats boxes using bootstrap grids. Total 16 grids 4X4 ie each row contains 4 columns. Instead of creating 16 match stats boxes is there any way to dynamically populate the data using ReactJS.

In app.js :

import React, { Component } from 'react';
import './App.css';
import Navbar from './components/navbar';
import Content from './components/content';
import Pagination from './components/pagination';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar/>
        <Content/>
        <Pagination/>
      </div>
    );
  }
}

export default App;

In Content.js:

import React, { Component } from 'react';
import './content.css';

class Content extends Component {
    constructor(props){
        super(props);
        this.state = {
            matches:[],
            loading:true
        };
    }

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res,
        loading:false
      })
    })
    }

    render() {
        if (this.state.loading) {
            return <div>>Loading...</div>
        }

    return (
      <div>
          <div class="row">

            <div class="col-lg-3">
                <div id="one">
                    <p class="match">Match {this.state.matches[0].id}</p>
                    <p><h4>{this.state.matches[0].team1}</h4></p>
                    <p>VS</p>
                    <p><h4>{this.state.matches[0].team2}</h4></p>
                    <div class="winner">
                        <p><h3>Winner</h3></p>
                        <p><h4>{this.state.matches[0].winner}</h4></p>
                    </div>
                    <div class="stats">
                    <button type="button" class="btn btn-primary">View Stats</button>
                    </div>
                </div>
            </div>
          </div>
      </div>
    );
  }
}

export default Content;

In content.js there is only 1 match stats box and instead of hard coding 16 boxes how can I prevent code redundant code in render function.

Current view of my web app:

Answer 1

you can use the map function. Please check the code below:

import React, { Component } from 'react';
import './content.css';

class Content extends Component {
    constructor(props) {
        super(props);
        this.state = {
            matches: [],
            loading: true
        };
    }

    componentDidMount() {
        fetch('api/matches')
            .then(res => res.json())
            .then(res => {
                console.log(res)
                this.setState({
                    matches: res,
                    loading: false
                })
            })
    }

    renderMatches() {
        return this.state.matches.map(match => {
            return (
                <div class="col-lg-3">
                    <div id="one">
                        <p class="match">Match {match.id}</p>
                        <p><h4>{match.team1}</h4></p>
                        <p>VS</p>
                        <p><h4>{match.team2}</h4></p>
                        <div class="winner">
                            <p><h3>Winner</h3></p>
                            <p><h4>{match.winner}</h4></p>
                        </div>
                        <div class="stats">
                            <button type="button" class="btn btn-primary">View Stats</button>
                        </div>
                    </div>
                </div>
            );
        })
    }

    render() {
        if (this.state.loading) {
            return <div>>Loading...</div>
        }

        return (
            <div>
                <div class="row">
                    {this.renderMatches()}
                </div>
            </div>
        );
    }
}

export default Content;

Answer 2

You can split your code into separate Table , Row , and Cell components. That way you can add your data to Table and it can feed the appropriate data to the rows, and the rows can feed appropriate data to the cells.

Here's a rough example to get you started:

 function Table({data}) { return ( <table> {data.map(row => <Row data={row} />)} </table> ) } function Row({data}) { return ( <tr> {data.map(cell => <Cell data={cell} />)} </tr> ) } function Cell({data}) { return ( <td>{data}</td> ) } const data = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12] ]; ReactDOM.render( <Table data={data} />, document.getElementById('container') ); 

 table { border-collapse: collapse; border: 1px solid #454545; } td { padding: 5px; border: 1px solid #dfdfdf; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"></div>