Reactjs 反应材料表未显示表图标

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

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

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>;
  }
}

类注册列表扩展组件{
状态={
注册：[]，
};
infoButtonHandler（id）{}
componentDidMount（）{
axios.get（“http://localhost:3030/api/items）然后（（res）=>{
让注册=[]；
res.data.forEach（（注册）=>{
让children=“”；
for（设i=0；i
);
返回{table}；
}
}

---

将物料界面升级为@material UI/core@4.2.1按纱线添加@材料界面/core@4.2.1希望它能起作用，为了让它们工作，我手动添加了它们。

它在网站上说明了该做什么

添加材质图标 在材质表中使用图标有两种方法：通过html导入材质图标字体或导入材质图标并使用材质表图标

HTML

要使用纱线安装@material ui/图标，请执行以下操作：

yarn add @material-ui/icons

如果您的环境不支持树抖动，建议使用以下方法导入图标：

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

如果您的环境支持树抖动，也可以通过以下方式导入图标：

import { AddBox, ArrowDownward } from "@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}
  ...
/>

从'react'导入{forwardRef}；
从“@material ui/icons/AddBox”导入AddBox；
从“@material ui/icons/arrowdown”导入向下箭头；
从“@material ui/icons/Check”导入检查；
从“@material ui/icons/ChevronLeft”导入ChevronLeft”；
从“@material ui/icons/ChevronRight”导入ChevronRight；
从“@material ui/icons/Clear”导入清除；
从“@material ui/icons/DeleteOutline”导入DeleteOutline；
从“@material ui/icons/Edit”导入编辑；
从“@material ui/icons/FilterList”导入过滤器列表；
从“@material ui/icons/FirstPage”导入第一页；
从“@material ui/icons/LastPage”导入LastPage；
从“@material ui/icons/Remove”导入删除；
从“@material ui/icons/SaveAlt”导入SaveAlt；
从“@material ui/icons/Search”导入搜索；
从“@material ui/icons/ViewColumn”导入ViewColumn；
常数表图标={
添加：forwardRef（（道具，ref）=>），
检查：forwardRef（（道具，ref）=>），
清除：forwardRef（（道具，ref）=>），
删除：forwardRef（（道具，ref）=>），
DetailPanel:forwardRef（（道具，ref）=>），
编辑：forwardRef（（道具，ref）=>），
导出：forwardRef（（道具，ref）=>），
过滤器：forwardRef（（道具，ref）=>），
首页：forwardRef（（道具，ref）=>），
最后一页：forwardRef（（道具，ref）=>），
下一页：forwardRef（（道具，ref）=>），
上一页：forwardRef（（道具，ref）=>），
ResetSearch:forwardRef（（道具，ref）=>），
搜索：forwardRef（（道具，ref）=>），
SortArrow:forwardRef（（道具，ref）=>），
第三阶段检查：forwardRef（（道具，ref）=>），
ViewColumn:forwardRef（（道具，ref）=>）
};

这种方法对我有效

 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
        })
      ]}

从“@material ui/icons/Delete”导入DeleteIcon；
行动={[
行数据=>({
图标：删除图标，
工具提示：“删除用户”，
onClick：（event，rowData）=>confirm（“您想删除”+rowData.name），
禁用：rowData.birthYear<2000
})
]}

您需要导入

'forwardRef'

才能工作，否则错误：

'forwardRef'未定义

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}
  ...
/>

 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
        })
      ]}