Question

我在react js中有一个普通的表，就像这样生成（这只是用于生成td元素的提取物。其他代码是一个名为CompanyList的类，它是一个呈现表的反应组件;

import React from 'react';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Line } from 'react-chartjs-2';
import { actionCreators as companiesActionCreators } from '../../reducers/companies'
import { getSelectedAndFilteredCompanies, getChartData } from '../../selectors/companies';
import DropBox from '../DropBox'
import { getRevenueSelectedRange, getTotalAssetsSelectedRange } from '../../selectors/companies'
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';

const Company = ({ company, selectCompany, deselectCompany }) => (
  <tr>
    <td><input type='checkbox' checked={company.selected} onChange={() => company.selected ? deselectCompany(company.id) : selectCompany(company.id)} /></td>
    <td>{ company['Company Name'] }</td>
    <td>{ company['Revenue bucket'] }</td>
    <td>{ company['Current Yield'] }</td>
    <td>{ company['Sector'] }</td>
    <td>{ company['Revenue bucket'] }</td>
    <td>{ company['Revenue 2007'] }</td>
    <td>{ company['Company Name'] }</td>
    <td>{ company['Company Name'] }</td>
  </tr>
);

但是我想将此表转换为使用react js插件react-bootstrap-table-2，但在阅读docs后，我不确定我的产品数组是否应该像这样;

products = [{ 'Name' : { company['Company Name'] } , 'checkbox' : <input type='checkbox' checked={company.selected} onChange={() => company.selected ? deselectCompany(company.id) : selectCompany(company.id)} /> }]

Answer 1

下面是一个示例，您的表看起来像是用react-bootstrap-table-2构建的：

import BootstrapTable from 'react-bootstrap-table-next';

class Component extends React.Component {
    renderColumns () {
        return [
            { dataField: 'id', text: 'Id', hidden: true },
            { dataField: 'isSelected', text: 'Selected' },
            { dataField: 'companyName', text: 'Company name' },
            { dataField: 'revenueBucket', text: 'Revenue bucket' },
            { dataField: 'currentYield', text: 'Current Yield' },
            { dataField: 'sector', text: 'Sector' },
        ]
    }

    renderRows () {
        const { companies, deselectCompany, selectCompany} = this.props 
        companies.map(company => {
            return {
                id: company.id,
                isSelected: <input type='checkbox' checked={company.isSelected} onChange={() => company.isSelected ? deselectCompany(company.id) : selectCompany(company.id)} />,
                companyName: company['Company Name'],
                revenueBucket: company['Revenue bucket'],
                currentYield: company['Current Yield'],
                sector: company['Sector']
            }
        })
    }

    render () {
        return <BootstrapTable
            keyField='id'
            data={ this.renderRows(companies) }
            columns={ this.renderColumns() }
        />
    }

}

请记住，列dataField和行键必须相等。还有另一条建议是像我这样将列和行渲染分开，以避免混淆。

如何将react js中的普通表转换为使用react bootstrap table

1 个答案: