Material-UI + React:卡无法使用扩展器进行扩展

Question

我有一个简单的卡组件,我从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来处理点击操作的某些组件(如可扩展卡或IconMenu).承诺将来会删除此依赖项,但是现在您需要:

1. 使用--save标志通过npm安装react-tap-event-plugin
2. 在app初始化代码中的某处导入并调用插件,如下所示:

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

injectTapEventPlugin();