如何使用 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>