如何使用reactjs動態填充引導網格？

Question

我正在嘗試使用引導網格來顯示匹配統計信息框。 總共16個4X4網格，即每行包含4列。 除了創建16個匹配統計信息框外，沒有任何方法可以使用ReactJS動態填充數據。

在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;

在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;

在content.js中，只有1個匹配狀態框，而不是16個硬編碼框，如何防止渲染函數中的代碼冗余代碼。

我的網絡應用的當前視圖：

Answer 1

您可以使用地圖功能。 請檢查以下代碼：

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

您可以將代碼拆分為單獨的Table ， Row和Cell組件。 這樣，您可以將數據添加到Table ，並且可以將適當的數據提供給行，並且行可以將適當的數據提供給單元格。

這是一個入門的粗糙示例：

 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>