对象解构 eslint 抛出 react/prop-types答案

【问题标题】：Object Destructuring eslint throws react/prop-types对象解构 eslint 抛出 react/prop-types
【发布时间】：2021-07-27 05:16:46
【问题描述】：

export const Top = (props) => {

    return (
        <div key={props.id} className={props.borderColor}>
            <div className="h-3/4 bg-green-200 border-black border-1 grid justify-items-center">
                <p className="text-xl font-bold">{props.title}</p>
...

在我阅读 Airbnb JavaScript 样式指南之前，我的代码看起来如此。

然后我改成下面这样。

export const Top = (props) => {
    const { id, borderColor, title, price, color } = props;
    
    return (
        <div key={id} className={borderColor}>
            <div className="h-3/4 bg-green-200 border-black border-1 grid justify-items-center">
                <p className="text-xl font-bold">{title}</p>

我喜欢它，但是eslint指责我犯了以下错误：

'id' is missing in props validation           react/prop-types

经过简短的研究，我发现了以下内容 React eslint error missing in props validation

所以我改变了我的代码。

export const Top = () => {
    const { id, borderColor, title, price, color } = this.props;

    return (
        <div key={id} className={borderColor}>
            <div className="h-3/4 bg-green-200 border-black border-1 grid justify-items-center">
                <p className="text-xl font-bold">{title}</p>

错误消失了，但后来我得到了这个错误：

Stateless functional components should not use `this`  react/no-this-in-sfc

可能不是一个好的解决方案，我不使用类。

Airbnb 指南说以下是最好的方法。

function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

但是如果括号中的参数超过 2 个怎么办？我记得 robert c martin 的干净代码书中提到了这一点。

什么对你有用？我也不想禁用任何规则，但想以干净的方式解决问题。

【问题讨论】：

标签： javascript reactjs eslint eslint-config-airbnb

【解决方案1】：

export const Top = (props) => {
const { id, borderColor, title, price, color } = props;

return (
    <div key={id} className={borderColor}>
        <div className="h-3/4 bg-green-200 border-black border-1 grid justify-items-center">
            <p className="text-xl font-bold">{title}</p>

这是对的。只是你必须做一些额外的代码。

在导出块之前你必须导入PropTypes

  import React from 'react';
  import PropTypes from 'prop-types';

然后在导出块之后你必须添加这些

Top.propTypes = {
  id: PropTypes.oneOfType(PropTypes.number, PropTypes.string),
  borderColor: PropTypes.string,
  title: PropTypes.string,
  price: PropTypes.number,
  color: PropTypes.string,
}

更多详情，请查看此链接https://reactjs.org/docs/typechecking-with-proptypes.html

【讨论】：

谢谢。解决了问题。
谢谢。您能否将此答案标记为已接受？否则，将来当有人看到这个问题时，他（他）可能会对答案是否有效感到困惑。 @詹斯

【解决方案2】：

你得到了第二个错误（this），因为函数组件中没有this

尝试：

export const Top = (props) => {
    const { id, borderColor, title, price, color } = props;
...

你可以使用这个方法获取组件的 props
1)

export default MyComponent(props){
...
}

解构 props 对象

export default MyComponent({prop1, prop2, prop3} ...){
...
}

我不喜欢第二个选项，因为如果明天你要添加 10 个新道具，你需要确保将其添加到括号中，之后括号看起来会比之前长得多，这使得它无法阅读

但如果它是一个小组件，第二个选项是最好的

【讨论】：