如何摆脱：警告：<span> 标签上的 prop `settaskstatus` 的值无效答案

【问题标题】：How to get rid of : Warning: Invalid value for prop `settaskstatus` on <span> tag如何摆脱：警告：<span> 标签上的 prop `settaskstatus` 的值无效
【发布时间】：2020-02-13 13:09:45
【问题描述】：

我已经创建了自己的组件，如下：

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。这曾经在 react 中很简单，这里是之前展示的组件标记

                     <StyledCheckbox
                        status={this.state.status2}
                        message={this.props.message}
                        settaskstatus={this.setTaskStatus}
                     />

但是现在我收到了这个错误

backend.js:6 警告：prop settaskstatus on 的值无效标签。从元素中删除它，或者传递一个字符串或数字将其保存在 DOM 中的值。有关详细信息，请参阅 www.fb.me/react-attribute-behavior 在跨度内（由 ForwardRef(ButtonBase) 创建）在 ForwardRef(ButtonBase) 中（由 WithStyles(ForwardRef(ButtonBase)) 创建）

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我认为问题可能在于您将 { ...props } 传递给 <Checkbox /> 和 props 包括 settaskstatus，这是一个自定义属性。

尝试删除它，然后将 { ...rest } 向下传递。

https://reactjs.org/warnings/unknown-prop.html

【讨论】：

【解决方案2】：

尝试将 props 解构为 rest 对象和 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";
    }
    // See here:
    const {settaskstatus, ...rest} = props;
    // End see here :) 
    return (
        <Checkbox
            className={classes.root + " checklistTaskStyledCheckbox"}
            checkedIcon={<span className={clsx(classes.icon, iconClassName)} />}
            color="default"
            icon={<span className={iconClassName} />}
            {...rest}
            onChange={() => {
                settaskstatus(props.message)
            }}
        />
    );
}
export default StyledCheckbox;

【讨论】：