reactjs - 如何摆脱:警告:标签上的 prop `settaskstatus` 的值无效
问题描述
我创建了自己的组件,如下:
import React, { Component, Fragment } from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
function StyledCheckbox(props) {
const classes = useStyles();
let iconClassName;
if (!props.status) {
iconClassName = classes.undoneIcon;
} else if (props.status == 1) {
iconClassName = classes.inProgressIcon;
} else if (props.status == 2) {
iconClassName = classes.checkedIcon;
} else if (props.status == 3) {
iconClassName = "taskStatusCheckboxCANCELED";
}
return (
<Checkbox
className={classes.root + " checklistTaskStyledCheckbox"}
checkedIcon={<span className={clsx(classes.icon, iconClassName)} />}
color="default"
icon={<span className={iconClassName} />}
{...props}
onChange={() => {
props.settaskstatus(props.message)
}}
/>
);
}
export default StyledCheckbox;
所以如上所示,我需要传递 onChange eventListener 中调用的函数 settaskstatus。这过去在反应中很简单,这里是前面显示的组件标记
<StyledCheckbox
status={this.state.status2}
message={this.props.message}
settaskstatus={this.setTaskStatus}
/>
但现在我收到了这个错误
settaskstatus
backend.js:6 警告:标签上的道具值无效。要么将其从元素中移除,要么传递一个字符串或数值以将其保留在 DOM 中。详情见www.fb.me/react-attribute-behavior in span(由ForwardRef(ButtonBase)创建) in ForwardRef(ButtonBase)(由WithStyles(ForwardRef(ButtonBase)创建))
解决方案
我认为问题可能是您将 { ...props } 传递给<Checkbox />
并且props
在这一点上 include settaskstatus
,这是一个自定义属性。
尝试删除它,然后将 { ...rest } 向下传递。
推荐阅读
- java - Java 中的 ZigZag 解码/编码
- python - Python - 使用数据框的值来分配新数据框的名称
- python - 有没有更好/更有效的方法来做到这一点(矢量化)?使用 Pandas 的性能非常慢
- typescript - 无法从
- php - CodeIgniter - 更多案例的 URL 路由
- php - 使用模态存储数据并传递 $id 变量
- javascript - 如果我选择自己,则选择选项上的 jQuery 单击事件不起作用
- php - 在 CodeIgniter 中将模型直接分配给变量
- c# - C#如何像访问物理文件一样访问嵌入文件
- javascript - 如何将 createjs 库包含到 reactjs 项目中