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包含在...中，因为它不是从this.properties中提取的。这导致openIcon传播到div，这是一个unkonw prop。文档https://facebook.github.io/react/warnings/unknown-prop.html

中的正确解释

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

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

2 个答案: