Material-ui卡上的未知道具`openIcon`与反应

Question

当尝试在 material-ui 库中的 CardHeader 上应用 openIcon 属性时，我收到以下警告：

"Warning: Unknown prop `openIcon` on <div> tag. Remove this prop from the element. For details, see [link to react docs]
in div (created by CardHeader)
in CardHeader (created by SpoilerCard)
in div (created by Card)
in div (created by Paper)
in Paper (created by Card)
in Card (created by SpoilerCard)
in SpoilerCard (created by SpoilerCardContainer)
in SpoilerCardContainer (created by SpoilerCardList)
in div (created by SpoilerCardList)
in div (created by SpoilerCardList)
in SpoilerCardList (created by SpoilerCardListContainer)
in SpoilerCardListContainer (created by App)
in div (created by App)
in MuiThemeProvider (created by App)
in App"

虽然显示的消息是警告而非错误，但卡片上的图标不会改变。它在未展开时保持默认向下箭头，在展开时保持默认向上箭头。 我在尝试使用 closeIcon 属性时收到同样的错误。

组件的代码是：

import React from "react";
const PropTypes = React.PropTypes;
import {Card, CardHeader, CardText} from "material-ui/Card";
import IconButton from "material-ui/IconButton";
import ContentAdd from "material-ui/svg-icons/content/add";

const SpoilerCard = props => (
    <Card style={{paddingBottom: 16}}>
        <CardHeader
            title={props.title}
            subtitle={props.isActive ? "Active" : "Inactive"}
            actAsExpander={true}
            showExpandableButton={true}
            style={{paddingBottom: 0}}
            openIcon={
                <IconButton>
                    <ContentAdd />
                </IconButton>
            }
        />
        <CardText expandable={true} style={{paddingTop: 0, paddingBottom: 0}}>
        </CardText>
    </Card>
);

export default SpoilerCard;

知道为什么我会收到此错误吗？

编辑：我进行了进一步调查。在 Firefox 上使用 React Devtools 显示以下组件层次结构： Component hierarchy

openIcon 属性被错误地分配给子 div 而不是 CardExpandable 组件。

Answer 1

我刚刚从 material-ui 16.0.2 检查了这个属性是否存在。 因此，如果您使用的是 16.0.1 或更低版本，您将收到此警告。 原因是因为这段代码sn-p。

const {
  actAsExpander, // eslint-disable-line no-unused-vars
  avatar: avatarProp,
  children,
  expandable, // eslint-disable-line no-unused-vars
  showExpandableButton, // eslint-disable-line no-unused-vars
  style,
  subtitle,
  subtitleColor, // eslint-disable-line no-unused-vars
  subtitleStyle,
  textStyle,
  title,
  titleColor, // eslint-disable-line no-unused-vars
  titleStyle,
  ...other,
} = this.props;

还有这个：

<div {...other} style={prepareStyles(Object.assign(styles.root, style))}>

openIcon 包含在 ...other 中，因为它不是从 this.properties 中提取的。这会导致 openIcon 传播到 div ，这是一个 unkonw 道具。文档中的正确解释https://facebook.github.io/react/warnings/unknown-prop.html

因此，如果您使用旧版本的库，您将收到此警告。

Answer 2

我相信你必须在你的卡片上添加“expandable={true}”（或者只是“expandable”，它是“={true}”的缩写）

<Card style={{paddingBottom: 16}} expandable>
...