我正在使用一个带有 antd 的 React 钩子(Hook)组件。为表格设置列时,渲染函数给我一个 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)
最佳答案
ESLint 认为您正在定义一个新组件而没有为其设置任何名称。
这是因为 ESLint 无法识别 render prop pattern 的解释因为你不是直接将这个 render prop 写到一个组件中,而是写到一个对象中。
您可以将 render
prop 直接进入 <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>
),
}
]
希望对您有所帮助;)
关于javascript - ESLint : Component definition is missing displayName (react/display-name),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55620562/