ESLint：组件定义缺少 displayName (react/display-name)

Question

我正在使用一个带有 antd 的 React Hook 组件。为 table 设置列时，渲染函数给我一个 ESLint 错误：

ESLint: Component definition is missing displayName (react/display-name)

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

错误看起来是这样的：

这是代码：

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

有人能帮忙吗？

这是完整的组件代码（只是相关位）

import * as FooConstants from './constants'
import {connect} from 'react-redux'
import React, {useState, useEffect} from 'react'
import {Card, Table} from 'antd'
import PropTypes from 'prop-types'

const propTypes = {
  foos: PropTypes.object.isRequired,
}

function Foos(props) {

  const [selectedFooRows, setSelectedFooRows] = useState([])

  useEffect(() => {
    getFooDetails()
  }, [])

  function getFooDetails() {
    props.dispatch({
      type: FooConstants.GET_FOO_PAYMENT_SUMMARIES,
      params: {
        'group_by': 'country_code',
        'type': FooConstants.CLAIM_FOO,
      }
    })
    props.dispatch({
      type: FooConstants.GET_FOO_PAYMENTS,
      params: {'type': FooConstants.CLAIM_FOO, }
    })
  }

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

  function getCountForCountry(country_code){
    let selected_country = selectedFooRows.filter(function(row){
      return row.group === country_code
    })

    if(selected_country && selected_country.length > 0){
      return selected_country[0].ids.length
    } else {
      return 0
    }
  }

  return (
    <div>
      <Card
        title={FooConstants.LABEL_FOO_SUMMARY}>
        <Table
          columns={columns_payment_summary_table}
          bordered={true}
          dataSource={props.foos.foo_payment_summaries}
          loading={props.foos.foo_payment_summaries_pending && !props.foos.foo_payment_summaries}
          rowKey={record => record.group}
        />
      </Card>
    </div>
  )
}

Foos.propTypes = propTypes

const mapStateToProps = (state) => {
  return {foos: state.foosReducer}
}

export default connect(
  mapStateToProps,
)(Foos)

Answer 1

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

这是因为ESLint无法识别render prop pattern，因为你不是直接将这个render prop写到一个组件中，而是写到一个对象中。

您可以将 render 属性直接放入 <Column> 组件的 jsx 实现中，

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

或者通过这样做来关闭 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 2

使用 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 3

使用匿名函数和箭头函数将保持 ESLint: Component definition is missing displayName (react/display-name) 出来，我猜这是因为当我们通过函数渲染组件时，我们也通过命名渲染函数给它们一个 displayName .

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

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 4

this ESLint issue.

中对此进行了相当详尽的介绍

作为Loïc ，抑制 lint 错误是这里最简单的选择。

但是，存在 lint 错误是有原因的 -- , particularly in 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 5

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

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

const getMyHTML = (text) => <span>{getCountForCountry(text)}</span>

const columns_payment_summary_table = [
  {
    title: SettlementConstants.LABEL_QUANTITY_SELECTED,
    dataIndex: 'group',
    key: 'group',
    render: getMyHTML,
  }
]

Answer 6

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

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

ESLint：组件定义缺少 displayName (react/display-name)

ESLint: Component definition is missing displayName (react/display-name)

javascript

reactjs

antd

react-hooks