如何解决我的 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;

■错误

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

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

How do I solve an error in my React Button Component?

components

jsx

reactjs

react-props