javascript - ESLint:组件定义缺少 displayName (react/display-name)
问题描述
我正在使用带有 antd 的反应钩子组件。为表设置列时,渲染函数给我一个 ESLint 错误:
ESLint:组件定义缺少 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)
解决方案
ESLint 认为您正在定义一个新组件而没有为其设置任何名称。
这是因为 ESLint 无法识别渲染道具模式,因为您不是直接将渲染道具写入组件,而是写入对象。
您可以将render
prop 直接放入<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>
),
}
]
我希望它有所帮助;)
推荐阅读
- android - 在更高 API 级别的 Android 上执行代码的问题
- drupal - Drupal 8 + Lighttpd 一些页面由于 URL 重写而引发 404 错误
- perl - Perl 是否执行返回后出现的代码?功能?
- python - 使用列表推导替换 amxn 数组中的元素
- html - HTML5/Bootstrap 格式 - 没有填充/边距的图像
- python - 根据一些愚蠢的条件将表达式拆分为列表
- sql-server - 使用基于连接的当前节点值从辅助表更新 xml 节点值
- javascript - Typescript、promise 和异步等待混淆
- ios - 使变量等于定时器的 UserDefaults
- javascript - Chrome 扩展:在后台脚本中使用 document.querySelector