将 JSON 文件数据插入 React Bootstrap Table 2

Question

我正在尝试导入本地 JSON 文件以使用 React Bootstrap Table 以表格方式显示数据。我一直在寻找其他资源，但找不到执行此操作的最佳方法。我能否在导入文件以在 table.

上显示时获得一些指导？

import React from "react";
import ReactDOM from "react-dom";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import BootstrapTable from "react-bootstrap-table-next";

var data = require('./data.json');

const items = [
  data
];

const Columnlist = props => {
  const columns = [
    {
      dataField: "MEMNAME",
      text: 'Dataset Name'
    },
    {
      dataField: "NAME",
      text: 'Variable Name'
    },
    {
      dataField: "LABEL",
      text: 'Variable Label'
    }
  ];
  return(
    <div style = {{padding: '20px'}}>
      <h1 className='h2'>Variables</h1>
      <BootstrapTable keyField='id' data = {items} columns = {columns} />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<Columnlist />, rootElement);

Answer 1

这是一个适用于您的示例：https://codesandbox.io/s/festive-rgb-75z4o/。有疑问就Lmk吧。

Answer 2

在我的代码中，我根据 json 文件自定义了列数据，假设 data.json 如下

[
    { "id": "1", "name": "Product A", "price": 10 },
    { "id": "2", "name": "Product B", "price": 20 },
    { "id": "3", "name": "Product C", "price": 30 }
]

我们可以根据 json 元素键自定义列标题，如下所示

const columnsData = [];

Object.entries(data[0]).map(([key], index) => {

    let header = {};
        header = {
            "dataField": key,
            "text": key.toUpperCase(),
            "sort": true,
            "onSort": (field, order) => {
                console.log(`${field} : ${order}`);
            },
            "style": (cell, row, rowIndex, colIndex) => {
                if (rowIndex % 2 === 0) {
                    return {
                        backgroundColor: '#F0F0F0',
                        fontSize: '11px'
                    };
                }
                return {
                    backgroundColor: 'white',
                    fontSize: '11px'
                };
            },
            "headerStyle": (colum, colIndex) => {
                return {
                    fontSize: '11px',
                    fontWeight: 'bold',
                    width: '30%',
                    whiteSpace: 'nowrap'
                };
            },
            "bodyStyle": {
                overflow: 'overlay'
            }
        }
        columnData.push(header);
    });

我们可以将 columnData 传递给 Bootstrap table,

<BootstrapTable 
    keyField='id' 
    data = {items} 
    columns = {columnData} 
/>

希望对您有所帮助。

将 JSON 文件数据插入 React Bootstrap Table 2

Inserting JSON File Data into React Bootstrap Table 2

json

reactjs

react-bootstrap

react-bootstrap-table