Question

我有一个来自 reactjs 的代码可以工作，但是，我的意思是担心，因为它可以满足它的需要，在这种情况下，它会在按钮关闭时展开并关闭。

我有一个来自控制台的错误

Failed prop type: Invalid prop `className` of type `object` supplied to `ForwardRef(IconButton)`, expected `string`.
    in ForwardRef(IconButton) (created by WithStyles(ForwardRef(IconButton)))

虽然我的代码很简单，但我只想添加材质 ui 扩展器

  const { schedule, classes, onClick, deleteScd, visible } = props;
  const [expanded, setExpanded] = React.useState(false);

 const handleExpandClick = (e) => {
    // setExpanded(!expanded);
    e.preventDefault()
    e.stopPropagation();
    if(!expanded){
      setExpanded(true);
    }else{
      setExpanded(false);
    }
    console.log(expanded)
  };

    <Draggable>
      <Card className={classes.root} >
          <CardActions disableSpacing  className={classes.cardExpand } onClick={onClick} >
          <Box className={classes.head} >
            <Typography variant="h5" className={classes.title}>
              {title}
            </Typography>
            <Typography className={classes.timezone} color="textSecondary">
              {timezone}
            </Typography>
          </Box>
          <IconButton
            className={classes.expand, {
              [classes.expandOpen]: expanded,
            }}
            onClick={handleExpandClick}
            aria-expanded={expanded}
            aria-label="show more"
          >
            <ExpandMoreIcon className={classes.expandIcon} />
          </IconButton>
          </CardActions>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <Card className={classes.root} variant="outlined">
            <CardContent style={{ padding: "10px 3px 3px 3px" }}>
              

              Content

              
            </CardContent>
          </Card>
        </Collapse>
      </Card>
   </Draggable>

我想解决这个问题，因为我的裁判还有另一个问题

Answer 1

className 组件的 IconButton 道具必须接收字符串值（如道具类型警告所述）。只有在视图展开时才可以使用三元表达式来应用类，例如 className={expanded ? classes.expandOpen : ''}。

reactjs失败的道具类型：提供给`ForwardRef（IconButton）`的`object`类型的无效道具`className`，预期`string`

1 个答案: