如何解决React Button组件中的错误？

Question

我的Button组件中有一个错误，但我不知道哪里出了问题。如果有人能帮我那就太好了..。代码如下。最近我添加了ESLint +更漂亮，但我不知道这是不是问题所在。

导出的文件

import React from 'react';
import classes from './Button.module.css';

const Button = (props) => {
return (
<button
  type={props.type}
  className={`${classes.button} ${props.className}`}
  onClick={props.onClick}
>
  {props.children}
</button>
  );
};

export default Button;

导入的文件

import Button from '../UI/Button';

const Login = () => {
return (
<div>
  <form>
    <Button
      type='submit'
      className={classes['login-btn']}
      onClick={submitLoginHandler}
    >
      Login
    </Button>
  </form>
</div>
);
};

export default Login;

错误

​

Answer 1

这些是警告，而不是错误。它说你必须检查你的属性类型(字符串，İnt，布尔值，函数)

对于您的代码：

Button.propTypes = {
  type: PropTypes.string,
  className:PropTypes.string,
  onClick: PropTypes.func,
  children: PropTypes.string
};

但我建议你不要使用儿童道具，例如使用buttonLabel。

<Button
  type='submit'
  className={classes['login-btn']}
  onClick={submitLoginHandler}
  buttonLabel="Login"
  />

得到这样的道具：

const Button = ({type,className,onClick,buttonLabel}) => {
return (
<button
  type={type}
  className={`${classes.button} ${className}`}
  onClick={onClick}
>
  {buttonLabel}
</button>
  );
};

最终属性类型：

Button.propTypes = {
  type: PropTypes.string,
  className:PropTypes.string,
  onClick: PropTypes.func,
  buttonLabel: PropTypes.string
};

更多信息：https://reactjs.org/docs/typechecking-with-proptypes.htm