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

我认为您必须将 "expandable={true}" 添加到您的卡中（或者只是 "expandable"，这是“={true}”的缩写）

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

Answer 2

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

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 这是一个未知的道具。文档中的正确解释 https://facebook.github.io/react/warnings/unknown-prop.html

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

material-ui 卡上的未知道具 `openIcon` 有反应

Unknown prop `openIcon` on material-ui card with react

reactjs

material-design

material-ui