Question

是否有任何单元格编辑功能或某些库，以便我可以为表格中的每个用户生成唯一的ID？我正在考虑使用react-key-index库。

您可以在此处查看我的users表：http://campers-leaderboard-cmtran7393.c9users.io:8080/

谢谢！

import React, { Component } from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import fetch from 'isomorphic-fetch';

const API = 'https://fcctop100.herokuapp.com/api/fccusers/top/recent';


function imageFormatter(cell, row){
  return "<img style='height:100px; width: 150px' src='"+cell+"'/>" ;
}

function userLinkFormatter(cell,row){
  return   `<a href="https://www.freecodecamp.org/${cell}" target='_blank'>` + cell + `</a>`;
}

class App extends Component {
  constructor(props){
    super(props);
    this.state = {campers: []};


  }
  componentDidMount() {
    fetch(API)
      .then(response => response.json())
      .catch(error => console.error('Error:', error))
      .then(data => {this.setState({ campers: data })}
      )


  }


  render() {
    if(!this.state.campers){return <p>Loading...</p>}
    return (
     <div className="container-fluid">
        <h1 className="text-center">FreeCodeCamp Leaderboard</h1>
       <BootstrapTable data={this.state.campers} striped={true} hover={true} >
        <TableHeaderColumn dataField='id' isKey={true}>#</TableHeaderColumn>
        <TableHeaderColumn dataField='img' dataAlign='center' dataFormat={imageFormatter}>Avatar</TableHeaderColumn>
        <TableHeaderColumn dataField='username' dataAlign='center' dataFormat={userLinkFormatter}>Camper Name</TableHeaderColumn>
        <TableHeaderColumn dataField='recent' dataAlign='center' dataSort={true}>Points in the past 30 days</TableHeaderColumn>
        <TableHeaderColumn dataField='alltime' dataAlign='center' dataSort={true}>All time points</TableHeaderColumn>

      </BootstrapTable>

      </div>
      );
  }
}

export default App;

Answer 1

我也有这个问题，因为我在带有免费层的heroku上使用CleanDB，这会使ID增加10。

为此，我的解决方案是通过这种方式生成/替换ID：

    campers.forEach((item, i) => item.id = i + 1);

不需要使用react-key-index库，因为较小的依赖关系总是更容易维护项目。

如何为React bootstrap表生成ID？

1 个答案: