Question

为什么我会收到错误

元素类型无效：需要一个字符串（用于内置组件）或类/函数（对于复合组件）但得到：undefined。

使用material-ui Table组件时，但是当我使用简单的HTML表或在我的应用程序的其他地方使用相同的Material-ui组件时却没有出错？

(Link to CodeSandbox with HTML table and commented out Material-UI Table)

Answer 1

你的材料 - ui进口是错误的（好吧，有些是）。

console.log(
  Table,
  TableHeader,
  TableHeaderColumn,
  TableRowColumn
);

这4个是null。您必须以不同方式导入它们（您在哪里找到最后3个？）。

您可以像这样导入组件：

import {
  default as Table,
  TableBody,
  TableHead,
  TableRow,
  TableCell
} from 'material-ui/Table';

使用正确的组件修复TableExampleSimple：

const TableExampleSimple = () => (
  <Table>
    <TableHead>
      <TableRow>
        <TableCell>ID</TableCell>
        <TableCell>Name</TableCell>
        <TableCell>Status</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell>1</TableCell>
        <TableCell>John Smith</TableCell>
        <TableCell>Employed</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>2</TableCell>
        <TableCell>Randal White</TableCell>
        <TableCell>Unemployed</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>3</TableCell>
        <TableCell>Stephanie Sanders</TableCell>
        <TableCell>Employed</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>4</TableCell>
        <TableCell>Steve Brown</TableCell>
        <TableCell>Employed</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>5</TableCell>
        <TableCell>Christopher Nolan</TableCell>
        <TableCell>Unemployed</TableCell>
      </TableRow>
    </TableBody>
  </Table>
);

更新了沙箱：https://codesandbox.io/s/yq6ww61l0j

作为一般提示，当你得到＆＃34;元素无效＆＃34;您始终可以通过检查导入的组件来启动错误。您可以为每个组件添加此类调试代码：

if (!MyComponent) console.error("MyComponent's import is wrong");

渲染材料-ui表vs HTML表[错误：元素类型无效]

1 个答案: