Question

我已经使用create-react-app创建了应用。然后我安装了react-table软件包（使用命令npm install --save react-table）。启动我的应用程序时，我得到找不到模块：无法解决'react-table / react-table.css'这个错误。

任何建议如何解决此问题。预先感谢！

Answer 1

可悲的react-table v7不支持react-table.css文件。

如果要重用react-table.css，建议使用v6。这是我的示例：

https://codesandbox.io/s/react-table-custom-pagination-1onbd

我们可以轻松地为react-table创建自定义的CSS，在线上有很多示例。

Answer 2

您应该安装react-table版本6。

$ npm install react-table-6

然后导入这些

import ReactTable from "react-table-6";  
import "react-table-6/react-table.css"

Answer 3

react-table 的当前版本是 7。 React table 6th 版本支持 cs，

您应该安装 react-table version-6。

$ npm install react-table-6

接下来将其导入文件

    import ReactTable from "react-table-6";  
    import "react-table-6/react-table.css" 

**Sample Code** 

import React, {useState, useEffect,Component } from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import $ from 'jquery';
import './Markettable.css';
import 'datatables.net';
import 'datatables.net-dt/css/jquery.dataTables.css';
import axios from 'axios';
import ReactTable from "react-table-6";  
import "react-table-6/react-table.css" ;



export default class Markettable extends Component {
  constructor(props){
    super(props)
    this.state = {
      market: [],
      loading:true
    }
  }

async getMarketPrice(){
    const res = await axios.get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&sparkline=false&price_change_percentage=1h%2C24h%2C7d`)
    console.log(res.data)
    this.setState({loading:false, market: res.data})
  }

  componentDidMount(){
    this.getMarketPrice()
  }

 render() {
    const columns = [{  
      Header: 'ID',  
      accessor: 'name',
      sortable: true,

     }
     ,{  
      Header: 'Name',  
      accessor: 'precentage' ,
      },
      {  
        Header: 'Website',  
        accessor: 'market_cap',
        }
  ]
    return (
        <>
        <div className= "container-fluid">
      

      <div className="header">
        <h2 className= "page-header text-center text-uppercase">
        <b> Marketing Prices </b>
        </h2>
         <ul className="breadcrumb ">
                 <li><a href="#" style={{color: 'black'}}>Home</a></li>

                <li className="active" style={{color: '  #660000'}}>Marketing Price</li>
            </ul>
      </div>

      <div className ="row">
      <div className = "col-12">
        <div className="card">
                        <div className="card-action">

                        <div className="marketprice">
                        <div className="row">
                        <div className ="col-12">
                        <div className ="card">
                        <div className="card-body">
                        <h2> <b> <u> MARKETING PRICE TABLE </u> </b> </h2>
                        </div>
                        <br/>

                           <div className="card-body--">

      <ReactTable  className ="text-center" 
      data={this.state.market}  
      columns={columns}  
   />
   
                           </div>
                           </div>
                           

                        </div>
                        
                        </div>
                        </div>
                        </div>
                        </div>
      </div>
      </div>
      </div>

   </>
    )
  }
}

Answer 4

import ReactTable from "react-table-6";

这个应该是“react-table-v6”

import "react-table-v6/react-table.css"

找不到模块：无法解析“ react-table / react-table.css”

4 个答案: