反应材料表不显示表格图标

Posted 2023-02-22

【中文标题】反应材料表不显示表格图标

【英文标题】：React material-table is not displaying table icons

【发布时间】：2020-12-18 04:43:42

【问题描述】：

我有一个项目，我必须使用一张桌子。我正在使用材料表。但我似乎无法让它看起来正确。表格所需的图标没有显示，而是我得到了一些占位符文本。

这是我用来显示表格的代码。我在项目中安装了材料表和材料图标。

class RegistrationList extends Component 
  state = 
    registrations: [],
  ;

  infoButtonHandler(id) 

  componentDidMount() 
    axios.get("http://localhost:3030/api/items").then((res) => 
      let registrations = [];
      res.data.forEach((registration) => 
        let childeren = "";
        for (let i = 0; i < registration.childeren.length; i++) 
          childeren += registration.childeren[i].name;
          if (i + 1 !== registration.childeren.length) 
            childeren += ", ";
          
        
        registrations.push(
          _id: registration._id,
          name: registration.name,
          childeren: childeren,
          street: registration.street,
          houseNumber: registration.houseNumber,
          city: registration.city,
          postalCode: registration.postalCode,
        );
      );
      this.setState( registrations: registrations );
    );
  

  rowClickedHandler(rowData) 
    this.props.history.push("/RegistrationDetail/" + rowData._id);
  

  render() 
    let table = (
      <MaterialTable
        title="Overzicht"
        columns=[
           title: "familienaam", field: "name" ,
           title: "kinderen", field: "childeren" ,
           title: "dorp", field: "city" ,
           title: "postcode", field: "postalCode" ,
           title: "straat", field: "street" ,
           title: "nr.", field: "houseNumber" ,
        ]
        data=this.state.registrations
        options=
          search: true,
        
        onRowClick=(event, rowData) => this.rowClickedHandler(rowData)
      />
    );
    return <div>table</div>;
  

【参考方案1】：

它在网站上说要做什么material-table

添加材质图标 在material-table中使用icon有两种方式，一种是通过html导入material icons font，一种是导入material icons，使用material-table icons prop。

HTML

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

或

导入材质图标 可以导入图标以在材料表中使用，从而为自定义材料表的外观和感觉提供更大的灵活性，而不是使用字体库。

使用 npm 安装 @material-ui/icons：

npm install @material-ui/icons --save

使用 yarn 安装 @material-ui/icons：

yarn add @material-ui/icons

如果您的环境不支持 tree-shaking，推荐的导入图标的方法如下：

import AddBox from "@material-ui/icons/AddBox";
import ArrowDownward from "@material-ui/icons/ArrowDownward";

如果您的环境支持 tree-shaking，您也可以通过这种方式导入图标：

import  AddBox, ArrowDownward  from "@material-ui/icons";

注意：以这种方式导入命名导出将导致每个图标的代码都包含在您的项目中，因此除非您配置 tree-shaking，否则不建议这样做。它还可能影响热模块重新加载性能。来源：@material-ui/icons

例子

import  forwardRef  from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const tableIcons = 
    Add: forwardRef((props, ref) => <AddBox ...props ref=ref />),
    Check: forwardRef((props, ref) => <Check ...props ref=ref />),
    Clear: forwardRef((props, ref) => <Clear ...props ref=ref />),
    Delete: forwardRef((props, ref) => <DeleteOutline ...props ref=ref />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight ...props ref=ref />),
    Edit: forwardRef((props, ref) => <Edit ...props ref=ref />),
    Export: forwardRef((props, ref) => <SaveAlt ...props ref=ref />),
    Filter: forwardRef((props, ref) => <FilterList ...props ref=ref />),
    FirstPage: forwardRef((props, ref) => <FirstPage ...props ref=ref />),
    LastPage: forwardRef((props, ref) => <LastPage ...props ref=ref />),
    NextPage: forwardRef((props, ref) => <ChevronRight ...props ref=ref />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft ...props ref=ref />),
    ResetSearch: forwardRef((props, ref) => <Clear ...props ref=ref />),
    Search: forwardRef((props, ref) => <Search ...props ref=ref />),
    SortArrow: forwardRef((props, ref) => <ArrowDownward ...props ref=ref />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove ...props ref=ref />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn ...props ref=ref />)
  ;

<MaterialTable
  icons=tableIcons
  ...
/>

【讨论】：

您需要导入'forwardRef' 才能工作，否则错误：'forwardRef' is not defined

【参考方案2】：

这种方法对我有用

 import DeleteIcon from '@material-ui/icons/Delete';

actions=[
        
        rowData => (
          icon: DeleteIcon,
          tooltip: 'Delete User',
          onClick: (event, rowData) => confirm("You want to delete " + rowData.name),
          disabled: rowData.birthYear < 2000
        )
      ]

【参考方案3】：

通过 yarn add @material-ui/core@4.2.1 将材质 UI 升级到 @material-ui/core@4.2.1，希望它能正常工作

【参考方案4】：

为了让它们正常工作，我手动添加了它们。