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时，我收到以下错误

错误＆＃39; url＆＃39;在道具验证react / prop-types中缺少

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

我做错了吗？

Answer 1

你没有做错任何事。问题是返回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 = ...

道具类型验证中的误报

1 个答案: