Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >reactjs失败的属性类型:为` `ForwardRef(IconButton)`提供的`object`类型的属性`className`无效,应为` `string` `

reactjs失败的属性类型:为` `ForwardRef(IconButton)`提供的`object`类型的属性`className`无效,应为` `string` `
EN

Stack Overflow用户
提问于 2021-06-05 22:13:20
回答 1查看 689关注 0票数 1

我有一个来自reactjs的代码,它正在工作,但是,我所说的woring是因为它做了它需要做的事情,在这种情况下,当按钮关闭时,它会展开并关闭。

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

代码语言:javascript
运行
AI代码解释
复制
Failed prop type: Invalid prop `className` of type `object` supplied to `ForwardRef(IconButton)`, expected `string`.
    in ForwardRef(IconButton) (created by WithStyles(ForwardRef(IconButton)))

虽然我的代码很简单,但我只想添加一些重要的ui扩展器

代码语言:javascript
运行
AI代码解释
复制
  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>

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

EN

回答 1

Stack Overflow用户

发布于 2021-06-06 00:04:40

IconButton组件的className属性必须接收一个字符串值(正如属性类型警告所述)。只有当视图展开时,才可以使用三元表达式来应用类,例如className={expanded ? classes.expandOpen : ''}

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67854315

复制
相关文章
实现Flutter应用中的全局导航栏效果
在移动应用开发中,导航栏是用户与应用交互的重要组成部分之一。它不仅提供了应用程序中不同页面之间的导航功能,还可以展示应用的整体结构和主要功能。因此,设计一个清晰、易用的导航栏对于提升用户体验和应用的可用性至关重要。
繁依Fanyi
2024/03/30
3640
全局变量在 Python 中的应用场景
在Python中,全局变量是在程序的全局范围内定义的变量,可以在整个程序中访问。虽然在Python中使用全局变量并不像在其他编程语言中那样被推荐,因为它可能导致代码不易理解和维护,但在一些特定的情况下,全局变量仍然是有用的。
华科云商小徐
2024/05/09
2970
堆栈的实现
进行数据插入和删除操作的一端称为栈顶,另一端称为栈底。栈中的数据元素遵守后进先出LIFO(Last In First Out)的原则。
小雨的分享社区
2022/10/26
7770
HyperLogLog函数在Spark中的高级应用
预聚合是高性能分析中的常用技术,例如,每小时100亿条的网站访问数据可以通过对常用的查询纬度进行聚合,被降低到1000万条访问统计,这样就能降低1000倍的数据处理量,从而在查询时大幅减少计算量,提升响应速度。更高层的聚合可以带来进一步的性能提升,例如,在时间维按天聚合,或者通过站点而不是URL聚合。
王知无-import_bigdata
2020/01/14
2.8K0
HyperLogLog函数在Spark中的高级应用
函数式编程在Redux/React中的应用
本文简述了软件复杂度问题及应对策略:抽象和组合;展示了抽象和组合在函数式编程中的应用;并展示了Redux/React在解决前端状态管理的复杂度方面对上述理论的实践。这其中包括了一段有趣的Redux推导。 软件复杂度及其应对策略 软件复杂度 软件的首要技术使命是管理复杂度。——代码大全 在软件开发过程中,随着需求的变化和系统规模的增大,我们的项目不可避免地会趋于复杂。如何对软件复杂度及其增长速率进行有效控制,便成为一个日益突出的问题。下面介绍两种控制复杂度的有效策略。 对应策略 抽象 世界的复杂、多变和人
美团技术团队
2018/03/13
2.3K0
函数式编程在Redux/React中的应用
回调函数在Java中的应用
关于回调函数(Callback Function),维基百科已经给出了相当简洁精炼的释义。Java的面向对象模型不支持函数,其无法像C语言那样,直接将函数指针作为参数;尽管如此,我们依然可以基于接口来获得等效的回调体验。
程序猿杜小头
2022/12/01
3.2K0
JavaScript基础之八——全局函数的应用
    JavaScript中提供了一些常用的全局函数,开发者可以直接对其进行调用,示例如下:
珲少
2018/08/15
4170
数学相关函数在PHP中的应用简介
对于数学计算来说,最常见的其实还是我们使用各种操作符的操作,比如说 +加、-减 之类的。当然,PHP 中也为我们提供了一些可以方便地进行其他数学运算的操作函数。这些函数都属于 Math 扩展。这个扩展是默认包含在 PHP 源码中的,不需要额外的安装,也不需要在编译的时候有什么特别的参数,都是直接可以使用的。
硬核项目经理
2021/09/02
1.1K0
UUID在Java中的实现与应用
UUID的全称为:Universally Unique IDentifier,也被称为GUID(Globally Unique IDentifier)。是一种由算法生成的唯一标识,它实质上是一个128位长的二进制整数。通常表示成32个16进制数组成的字符串,如:21EC2020-3AEA-1069-A2DD-08002B30309D。关于UUID标准的rfc定义详见:http://www.ietf.org/rfc/rfc4122.txt。 当然,GUID一词有时也专指微软对UUID标准的实现,用于Windows操作系统中。
编程随笔
2019/09/11
2.8K0
Js中的堆栈
堆heap是动态分配的内存,大小不定也不会自动释放,栈stack为自动分配的内存空间,在代码执行过程中自动释放。
WindRunnerMax
2020/08/27
3.3K0
基于 Redis 实现高级限流器及其在队列任务处理中的应用
上篇教程学院君给大家演示了如何通过 Redis 的字符串数据结构实现限流器,其中需要用到两个字符串键值对:一个用于设置单位时间窗口内的请求上限,另一个用于在这个时间窗口内对请求数进行统计,当请求数超出请求上限,则拒绝后续请求。
学院君
2021/01/22
1.6K0
基于图的技术在企业威胁评估中的应用
5G,云和物联网等技术的发展必将赋能新的信息设施。新的设施会带来新的场景,在新的场景中,入侵途径增加等原因会导致网络安全的问题越来越多。当然新技术的发展也会使网络安全防护向着更高水平的智能化和自动化的方向发展。如何打造智能化的网络安全防护成为了学术界和工业界的热点。人、技术、流程这三个要素,已成为网络安全运营(SecOps)中被广泛认可的铁三角。智能安全运营(AISecOps)[1]在SecOps的基础上,更强调利用技术实现“数据”的利用与流动,挖掘融合不同层次中数据的价值,最终提供各任务层次的决策支持。其中,技术是网络安全运营成败的关键要素之一。通过先进有效的技术构建AISecOps,跟上攻击者的步伐,才能防范新兴威胁。本文为AISecOps的技术分析系列篇,主要介绍基于图的技术在企业威胁评估中的应用。
绿盟科技研究通讯
2020/12/30
1.7K0
基于图的技术在企业威胁评估中的应用
mpvue 全局变量在HTML模板<template> 的应用
我们在开发项目时,经常用到的就是全局变量,在vue.js项目中,只要在main.js设置好全局变量后,在所有的页面方法和模板中都可以引用,把vue.js项目中的代码直接拷贝到mpvue时,发现在模板中不可用,下面解决方案:
honey缘木鱼
2019/03/15
2.2K0
基于模糊控的纯跟踪横向控制在倒车中的应用及实现
Pure Pursuit是一种几何跟踪控制算法,也被称为纯跟踪控制算法。他的思想就是基于当前车辆的后轮中心的位置,在参考路径上寻找一个预瞄点,假设车辆可按照一定转弯半径下行驶到该目标点,然后根据车辆当前位置到预瞄点距离、转弯半径和预瞄点与车头朝向夹角的几何关系来计算车辆的前轮转角,进而得到车辆的横向输入
艰默
2024/04/28
3590
基于模糊控的纯跟踪横向控制在倒车中的应用及实现
scanf函数的实战应用: 实例演示scanf函数在实际应用中的使用方法
在C语言中,scanf函数是一种常用的读取数据的方式,它可以按照我们预期的格式读取数据。为了让scanf函数更高效地工作,我们可以使用格式化字符串来限制输入的数据类型和长度。
曈曈too
2023/02/27
2.2K0
在 WordPress 中实现 PHP 版本的 wrap 函数
jQuery 有个 wrap 函数,可以使用指定的 HTML 元素来包裹每个被选元素。
Denis
2023/04/13
7450
在python中实现基于ICE框架的cl
ICE (Internet Communication Engine) 是zeroc公司实现的通信中间件
py3study
2020/01/03
2.2K0
设计模式 “策略模式” 在 CMP 虚拟机管理中的应用
策略模式中,对环境类的理解十分重要,环境类是需要使用算法的类,环境类根据具体的环境上下文使用不同的算法。
软件书桌
2024/04/19
1260
PHP基于堆栈实现的高级计算器功能示例
本文实例讲述了PHP基于堆栈实现的高级计算器功能。分享给大家供大家参考,具体如下: 当我们得到一个字符串运算式该如何去得出它的运算结果呢? 这时候我们就能使用堆栈的算法很巧妙的解决这个问题。 思路是这样的:(我们利用php函数substr循环去截取这个字符串运算式,依次取出这个字符串的值【我们得从第一个字符开始截取】,我们将开始截取位置设为一个循环增长的变量,初始化为【$index=0】),同时还需要创建两个栈,一个专门存放数字【$numStack】,一个存放运算符【$operStack】,我们还需要一个可以判断是否是运算符号的函数,将每次截取的值放入这个自定义函数中,返回一个可以区别为数字或运算符的标识,通过对这个标识的判断确定值是数字还是运算符,是数字就插入数栈,是运算符的话就插入符号栈。插入数栈的话可直接插入,但是符号栈的话需要特殊处理一下[【如果符号栈为空则直接插入,不为空:我们要将插入的符号与栈内的符号进行运算优先级比较(可以定义一个函数来判定符号优先级,把 *  和 / 假定为1  把 + 和 - 假定为0  假设数字大的优先级高,如此就能得出运算符优先级),当待插入的符号优先级小于等于栈内顶端的运算符优先级,就从数栈弹出两个值  符号栈弹出一个运算符 将它们进行运算】 下面是一个php的实例【参考自韩顺平老师的php算法教程】
用户2323866
2021/07/07
5760
合并对象在 Typescript 中的实现与应用
在日常开发中,尤其是在处理配置对象或者嵌套的数据结构时,对象的深度合并成为一项常见需求。这篇博客将介绍如何在JavaScript中实现对象的深度合并,并提供具体的使用例子。
訾博ZiBo
2025/01/06
3180

相似问题

在单数组中实现三层堆栈的应用

20

实现基于上下文的全局撤消/重做功能

10

递归+堆栈/队列在实际生命实现中的使用

20

基于堆栈的和基于堆的溢出

10

如何在Rails应用程序中实现(真正的)全局变量

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档