reactjs - 在函数参数中使用解构时，ESLint 抛出 "is missing in props validation"错误

Question

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

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

我收到了“react/prop-types”错误

'"id" is missing in prop validation

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

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,
    };