reactjs - 如何解决我的 React 按钮组件中的错误？

Question

我的 Button 组件中有错误，但我不知道出了什么问题。如果有人可以帮助我，那就太好了......代码如下。最近我添加了 ESLint + Prettier，但我不知道这是否是问题所在。

■导出文件

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;

■错误

标签： reactjscomponentsjsxreact-props

Answer 1

这些是警告而不是错误。它说你必须检查你的道具类型（String，İnt，Bool，Func）

对于您的代码：

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