Javascript 对象分解eslint抛出react/prop类型

经过短暂的研究，我发现了以下几点

所以我改变了我的代码

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

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

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

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

但是如果括号中有两个以上的参数呢？我记得罗伯特·c·马丁（robert c martin）在《干净的代码书》中把这一点说得同样糟糕

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

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

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

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

有关详细信息，请签出此链接由于函数组件中没有

此

，因此出现第二个错误（使用

此

）

尝试：

您可以使用此方法获取组件的道具
(一)

解构道具对象

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

---

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

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

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

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

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>

  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,
}

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

export default MyComponent(props){
...
}

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