Question

我收到es-lint的警告，告诉我在道具验证中缺少一些道具，但是问题是我无法使它起作用，因为它在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,
};

在返回中反应道具验证

1 个答案: