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

截至今天，对于处理点击操作的某些组件（如可扩展卡或IconMenu），material-ui需要 react-tap-event-plugin 。这种依赖性有望在将来被删除，但是现在你需要：

使用--save标志
进口＆amp;在应用程序初始化代码中的某处调用插件，如下所示：

＆＃13;

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

＆＃13;

Answer 2

我认为您的问题可能就是这样：

<Card expanded={true}>

您已将扩展值永久绑定到常量'true'，而不是将其绑定到组件状态：

<Card expanded={this.state.cardExpanded}>

您可能需要进行双向数据绑定。请在此处查看“受控组件”：

https://facebook.github.io/react/docs/forms.html#controlled-components

这就是我能从头脑中分辨出来的。我知道这不是一个功能齐全的答案，但我没有环境来为你测试它，我从来没有真正使用过这个特定的m-ui组件。不过，我希望它有所帮助。

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

2 个答案: