如何將外部 CSS 和 JS 文件添加到我的 React 組件中

Question

在 HTML 頁面中有一些特定的 CSS 和 JS 文件。 如何將它們添加到 React 組件ProductList ？

    import React from 'react';
import './plugins/datatables/dataTables.bootstrap4.min.css';
import './plugins/datatables/buttons.bootstrap4.min.css';

import './plugins/daterangepicker/daterangepicker.css';
import './plugins/select2/select2.min.css';
import './plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css';
import './plugins/timepicker/bootstrap-material-datetimepicker.css';
import './plugins/bootstrap-touchspin/css/jquery.bootstrap-touchspin.min.css';


function ProductList(props) {
    return (
        <div className="page-wrapper">
        {/* My Components Code */}    
        </div>

    );
}

export default ProductList;

Answer 1

使用反應引導表

 // es6
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';

return (<BootstrapTable data={ products } options={ { noDataText: 'This is custom text for empty data' } }>
     <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
     <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
     <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
    </BootstrapTable>
       );