javascript - Material -UI + React : Card cannot expand with expander

Question

我有一个简单的 Card 组件，是从material-ui 的网站复制的。

我正在尝试在我的代码中实现它。当我单击 CardHeader 时，它不会展开。

这是我的组件:

import React, { Component } from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

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

const CardExample = () => (
    <MuiThemeProvider muiTheme={getMuiTheme()}>
        <Card expanded={true}>
            <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>
            <CardActions expandable={true}>
                <FlatButton label="Action1" />
                <FlatButton label="Action2" />
            </CardActions>
        </Card>
    </MuiThemeProvider>
)

export default CardExample;

我已将其导入到我的容器中:

import React, { Component } from 'react';

import LogoBig from '../components/logobig';
import CardExample from '../components/cardexample';

export default class Completed extends Component {
    render() {
        return (
            <div className="popup completed main-container">
                <div className="logobar">
                    <div className="logo">
                        <LogoBig />
                    </div>
                </div>
                <div className="mainpanel">
                    <CardExample />
                </div>
            </div>
        );
    }
}

我已经像material-ui网站中的文档一样实现了它，但是扩展器什么也不做。

请帮我解决这个问题。我导入组件的方式有问题吗？还是别的什么？

谢谢

Answer 1

截至今天，material-ui 需要 react-tap-event-plugin 来处理某些处理点击操作的组件(例如可扩展的 Card 或 IconMenu)。这种依赖关系 promise 将来会被删除，但现在您需要:

1. 通过 npm 使用 --save 标志安装 React-tap-event-plugin
2. 在应用初始化代码中的某个位置导入并调用插件，如下所示:

import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();