Question

我试图描述表列，并在列“ render”函数中使用函数参数分解：

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

我遇到了“反应/道具类型”错误

道具验证中缺少
“ 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

Answer 1

这与销毁无关，只是因为eslint将columns.render解释为一个组件，并要求您记录其道具。

您仍然可以定义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,
    };

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

1 个答案: