在返回中反应道具验证

Question

我收到来自 es-lint 的警告，告诉我在 props 验证中缺少一些 props，但问题是我无法使其工作，因为它在 return 语句中。 我有以下代码，我从中删除了一些对此事不重要的部分，并且会使其变得不必要的大。

import React from 'react';
import PropTypes from 'prop-types';

const ColumnSearch = () => {
     // few general functions

    return {
        filterDropdown: ({
            confirm,
        }) => (
            <div >
                // some general code for inputs and buttons
            </div>
        ),
        render: text => (
            <Highlighter
                highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                searchWords={[searchText]}
                autoEscape
                textToHighlight={text}
            />
        ),
    };
};

export default ColumnSearch;

es-lint 告诉我

'confirm' is missing in props validationeslint(react/prop-types)

然后，我试过了：

ColumnSearch.propTypes = {
    confirm: PropTypes.func.isRequired,
};

ColumnSearch.propTypes = {
    filterDropdown: PropTypes.shape({
        confirm: PropTypes.func.isRequired,
    }).isRequired,
};

filterDropdown.propTypes = {
    confirm: PropTypes.func.isRequired,
};

但它们都没有奏效，后者告诉我：

'filterDropdown' is not defined.eslint(no-undef)

如何验证此道具？我认为简单地使用不是一个好主意：

/* eslint-disable react/prop-types */

编辑：

我用这段代码创建了一个沙盒：

CodeSandbox

Answer 1

你应该声明 confirm 属性，试试这个。

import React from 'react';
import PropTypes from 'prop-types';

const ColumnSearch = ({confirm}) => { //declare here
     // few general functions

    return {
        filterDropdown: ({
            confirm,
        }) => (
            <div >
                // some general code for inputs and buttons
            </div>
        ),
        render: text => (
            <Highlighter
                highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                searchWords={[searchText]}
                autoEscape
                textToHighlight={text}
            />
        ),
    };
};

export default ColumnSearch;

ColumnSearch.propTypes = {
    confirm: PropTypes.func.isRequired,
};