ESLint：组件定义缺少displayName（反应/显示名称）

Question

我正在使用带有antd的react hook组件。设置表的列时，render函数给我一个ESLint错误：

  

ESLint：组件定义缺少displayName   （反应/显示名称）

我尝试将displayName添加到对象，但这不起作用。

这是错误的外观：

这是代码：

powershell

有人可以帮忙吗？

这里是完整的组件代码（以及相关的位）

const columns_payment_summary_table = [ 
    {
      title: SettlementConstants.LABEL_QUANTITY_SELECTED,
      dataIndex: 'group',
      key: 'group',
      render: text => (
        <span>{getCountForCountry(text)}</span>
      ),
    }
  ]

Answer 1

为render键使用常规功能也将删除ESLint警告，而无需禁用该警告。

const columns_payment_summary_table = [ 
    {
        title: SettlementConstants.LABEL_QUANTITY_SELECTED,
        dataIndex: 'group',
        key: 'group',
        render: function countForCountry(text) {
            return <span>{getCountForCountry(text)}</span>
        },
    }
]

Answer 2

ESLint认为您正在定义一个新组件，而没有为其设置任何名称。

这是因为ESLint无法识别render prop pattern，因为您不是直接将此渲染道具写入组件，而是写入对象。

您可以将render道具直接放入<Column>组件的jsx实现中，或者通过执行以下操作来关闭ESLint的错误：

const columns_payment_summary_table = [ 
    {
        title: SettlementConstants.LABEL_QUANTITY_SELECTED,
        dataIndex: 'group',
        key: 'group',
        // eslint-disable-next-line react/display-name
        render: text => (
            <span>{getCountForCountry(text)}</span>
        ),
    }
]

我希望它能对您有所帮助；）

Answer 3

如果有人需要在所有文件中避免这种情况，请将以下添加到 .eslintrc.js 文件的规则部分，

{
  ...
  "rules": {
    "react/display-name": "off"
  }
}

Answer 4

使用匿名函数和箭头函数将使ESLint: Component definition is missing displayName (react/display-name)脱颖而出，我想这是因为当我们通过函数渲染组件时，我们也通过命名render函数为它们提供了displayName。 / p>

但是仅使用普通功能还不够，您可能仍然会遇到以下警告：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

您必须在渲染后立即执行正常功能。我通过使用以下代码通过了这两个规则。

render: () => {
    return (function Actions() {
        return (
            <Button>
            View
            </Button>
                );
            })();
        },

Answer 5

this ESLint issue中对此进行了非常详尽的介绍。

与Loïc suggested一样，抑制皮棉错误是此处最简单的选择。

但是，存在棉绒错误是有原因的-displayName can be helpful for debugging，尤其是在React DevTools的“组件”视图中。为函数分配displayName的最简单方法是使用命名函数声明，并提升定义：

function renderTable(text) {
  return (<span>{getCountForCountry(text)}</span>);
}
const columns_payment_summary_table = [
  {
    title: SettlementConstants.LABEL_QUANTITY_SELECTED,
    dataIndex: 'group',
    key: 'group',
    render: text => (
      <span>{getCountForCountry(text)}</span>
    ),
  }
]

但是，这显然更为冗长，如果您不希望在DevTools中按名称查找渲染的组件，则最简单的方法就是消除错误。

Answer 6

有时候，如果我们仅在一两个地方出现错误，就可以绕过规则。如果我们在多个地方都有相同的用例，该怎么办？每次我们必须禁用规则。

相反，我们可以通过将函数分配给render属性来绕过此错误。

sudo apt-get