时间戳

首页 > 解决方案 > 在函数参数中使用解构时，ESLint 会引发“道具验证中缺少”错误

reactjs - 在函数参数中使用解构时，ESLint 会引发“道具验证中缺少”错误

问题描述

我正在尝试描述表列并在列“渲染”函数中使用函数参数解构：

const columns = [
{
        field: 'description',
        // The parameter is row data object
        render: ({ id, description }) => (
            <Tooltip title={ id }>
                <div>
                    { description }
                </div>
            </Tooltip>
        )
    }
]

我得到了一个“react/prop-types”错误

道具验证中缺少“id”

与“描述”相同。所以我不得不使用：

render: (task) => (
        <Tooltip title={ task.id }>
            <div>
                { task.description }
            </div>
        </Tooltip>
    )

我想知道，也许仍然可以使用参数解构？

解决方法：

"react": "^16.7.0",
"eslint": "^5.3.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-app": "^4.0.1"

编辑：

我决定只为这些代码片段添加 eslint-disable-next-line

标签： reactjseslinteslint-config-airbnb

解决方案

这与解构无关，只是因为 eslint 解释columns.render为一个组件并要求您记录它的 props。

您仍然可以定义columns.render.propTypes以满足 eslint。

    const columns = [
        {
            field: 'description',
            // The parameter is row data object
            render: ({ id, description }) => (
                <Tooltip title={ id }>
                    <div>
                        { description }
                    </div>
                </Tooltip>
            )
        }
    ];
    columns.render.propTypes = {
        id: PropTypes.string,
        description: PropTypes.string,
    };

推荐阅读