javascript - Material UI 组件破坏 React 应用

Question

尝试在我的应用程序中使用嵌套组件似乎破坏了我的 React 应用程序。

使用以下代码应用程序加载正常:

import React from 'react';

const Manage = props => (
  <div>
    <span>Hello World!</span>
  </div>
)

export default Manage

但是，当我尝试将其中一个 Material-UI 组件添加到页面时，应用程序编译但拒绝加载，并抛出以下错误:

warning.js:33 警告:React.createElement:类型无效——需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到:未定义。您可能忘记了从定义组件的文件中导出组件。

import React from 'react';
import {Card, CardHeader, CardText} from 'material-ui/Card';

const Manage = props => (
  <div>
    <Card>
        <CardHeader
          title="Without Avatar"
          subtitle="Subtitle"
          actAsExpander={true}
          showExpandableButton={true}
        />
        <CardText expandable={true}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
          Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
          Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
        </CardText>
    </Card>
  </div>
)



export default Manage

Answer 1

您的Card 导入错误。 Card 组件是默认导出，而不是命名导出。把它改成这样:

import Card, {CardHeader, CardText} from 'material-ui/Card'