道具类型验证中的误报

Question

这是我的无状态自定义组件

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import './../css/bootstrap.min.css';

const RoundLink = (props) => {

    const handleClick = (e) => {
        if (!props.onClick) {
            return;
        }
        props.onClick(e);
    };

    const withLink = (button) => {
        return (
            <Link to={props.url}>
                {button}
            </Link>
        );
    };

    let button = <button onClick={handleClick} className="esgine-round-button btn btn-default round">{props.children}</button>;
    if (props.url) {
        return withLink(button);
    }
    return button;
};

RoundLink.propTypes = {
    url: PropTypes.string,
    onClick: PropTypes.func,
    children: PropTypes.string.isRequired,
};

export default RoundLink;

我的 package.json 有

"prop-types": "^15.6.1",
"react": "^16.2.0",

作为依赖，在 devDependencies

"devDependencies": {
    "eslint": "^4.18.2",
    "eslint-plugin-react": "^7.7.0"
  }

我也在用react-create-app

"react-scripts": "1.1.0",

注意：我知道它已经与 eslint 一起提供，我们必须将它从我们的依赖项中删除并使用开箱即用的那个（我们发现晚了，我们必须回滚我们添加的 eslint）

我们没有在 .eslintrc 中为 prop 类型配置规则（我有其他配置）所以我假设我从默认的 create-react-app 配置中得到错误。

最后，当我运行 eslint 时，我得到以下错误

error 'url' is missing in props validation react/prop-types

这是一个废话，因为它有明确的定义。

我做错了什么吗？

Answer 1

你没有做错任何事。问题是 returns JSX 组件的每个函数在技术上都是无状态组件。

因此，这也是一个组成部分：

const withLink = (button) => {
    return (
        <Link to={props.url}>
            {button}
        </Link>
    );
};

它访问props.url但没有propTypes。

但是，我认为这是一个错误，因为插件应该意识到 props 在这里没有定义为参数。

解决方法很简单，在函数外访问url即可：

const { url } = props;
const withLink = (button) => {
    return (
        <Link to={url}>
            {button}
        </Link>
    );
};

或者，让它成为一个合适的组件：

const WithLink = ({url, button}) => {
    return (
        <Link to={url}>
            {button}
        </Link>
    );
}
WithLink.propTypes = ...

道具类型验证中的误报

false positive in prop-types validation

reactjs

eslint

create-react-app

react-proptypes