1. ホーム
  2. js

ant design table エラー。コンポーネント定義に表示名がありません

2022-02-27 11:22:57
<パス
環境

1.リアクト:16
2.アント:3.15

問題:webpackがeslintを使用している場合、tableがエラーを報告する。Component definition is missing display name. eslintをコメントアウトすれば、エラーは報告されません。

コードは以下のような感じです。

class Search extends Component {
	// do something
}

// To clarify, there is no error if you don't inherit from the Search class
class SearchAction extends Search {
	constructor() {
		this.state = {
			fields: [
				{
                    title: 'customer_type',
                    dataIndex: 'customer_type',
                    key: 'show_customer_type'
                },
                {
                    title: 'applicant/application date',
                    dataIndex: 'last_save_name',
                    key: 'last_save_name',
                    render: (text, record) => (
                        <Fragment>
                            <div>{record.last_save_name || 'none'}</div>
                            <div>{record.last_save_time || 'none'}</div>
                        </Fragment>
                    )
                }
			]
		};
	}

	render{
		const props = {
			dataSource: this.state.fields,
			className: 'table-cus'
		};
		return (
			<div>
				<Table {. .props}>
                    {this.state.fields.map(elt => (
                        <Column
                            title={elt.title}
                            key={elt.key}
                            dataIndex={elt.dataIndex}
                            render={elt.render || (text => text)}
                        />
                    )}
                </Table>
			</div>
		);
	};
}


今のところ、テーブルの中で、テキストとレコードのパラメータは存在しているので、何が起こっているのかわかりません。
antの互換性がうまくいかなかったせいかもしれませんね

結局、私の解決策は eslint-disableでエラーを報告するコードを直接コメントアウトする。 (最後の手段として==)

/*eslint-disable*/
{
    title: 'applicant/application date',
    dataIndex: 'last_save_name',
    key: 'last_save_name',
    render: (text, record) => (
        <Fragment>
            <div>{record.last_save_name || 'none'}</div>
            <div>{record.last_save_time || 'none'}</div>
        </Fragment>
    )
}
/*eslint-disable*/