ESLint: в определении компонента отсутствует displayName (реакция/отображаемое имя)

ESLint считает, что вы определяете новый компонент, не присваивая ему никакого имени.

Это объясняется тем, что ESLint не может распознать визуализировать шаблон опоры, потому что вы не записываете эту поддержку рендеринга напрямую в компонент, а в объект.

Вы можете либо поместить render prop непосредственно в свою jsx-реализацию компонента <Column>, либо отключить ошибку 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>
        ),
    }
]

Надеюсь помог ;)

Использование обычной функции для клавиши 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>
        },
    }
]

Использование анонимных функций и стрелочных функций будет продолжать появляться ESLint: Component definition is missing displayName (react/display-name), я думаю, это потому, что когда мы визуализируем компонент через функцию, мы даем им отображаемое имя, также называя функцию рендеринга.

Но использования обычной функции недостаточно, вы все равно можете встретить следующее предупреждение:

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>
                );
            })();
        },

Это подробно описано в эта проблема ESLint.

Как и Лоикпредложенный, подавление ошибки lint является здесь самым простым вариантом.

Однако ошибка lint существует по причине — displayName может быть полезно для отладки, особенно в представлении компонентов 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, проще всего просто подавить ошибку.

Иногда мы можем обойти правила, если у нас есть ошибка только в одном или двух местах. Что, если у нас есть один и тот же вариант использования в нескольких местах. Каждый раз приходится отключать правила.

Вместо этого мы можем обойти эту ошибку, назначив функцию свойству рендеринга.

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

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

Если кому-то нужно избежать этого во всех файлах, добавьте ниже в раздел правил файла .eslintrc.js,

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