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

Posted 2023-02-23

【中文标题】如何解决我的 React 按钮组件中的错误？

【英文标题】：How do I solve an error in my React Button Component?

【发布时间】：2021-10-09 06:06:09

【问题描述】：

我的 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;

■错误

【问题讨论】：

您缺少 Button 组件的 PropTypes，请查看reactjs.org/docs/typechecking-with-proptypes.html

@noumanniazi 定义 propTypes 不是强制性的。

你是否已经为你的 Button 组件定义了 propTypes，你需要其中一些，并在某处使用 Button 而没有传递一些 props？

【参考方案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>
  );
;

最终的 Proptypes：

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

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

【讨论】：

非常感谢！我是 React 新手，还没有遇到过 PropTypes。我一定会阅读您发布的文件！