Ant Design select 标签无数据重命名

Question

我正在使用 Ant Design select 标签，当没有可用数据时它显示 'No Data'，有没有办法将该文本更改为其他内容，例如 'No Data'重命名为其他名称？

这里是示例代码：

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Select } from 'antd';

const { Option } = Select;

function onChange(value) {
  console.log(`selected ${value}`);
}

function onBlur() {
  console.log('blur');
}

function onFocus() {
  console.log('focus');
}

function onSearch(val) {
  console.log('search:', val);
}

ReactDOM.render(
  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
   
  </Select>,
  document.getElementById('container'),
);

Answer 1

使用属性 notFoundContent

关于如何使用它的信息可以在标题下的ant design select API文档中找到：

Select props

https://ant.design/components/select/#API

这是一个如何使用它的例子：

ReactDOM.render(
  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }


    notFoundContent={"Something Else"}


  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
  </Select>,
  document.getElementById("container")
);

可在此处找到工作示例：https://stackblitz.com/edit/react-gtuzeh?file=index.js

Answer 2

notFoundContent 属性会起作用，但它是旧版属性（仍受支持）。

<Select notFoundContent="No people avaialable"></Select>

有一张已关闭的 GitHub 票证 (#23064) 解释了解决方法和正确的方法。您需要用 <ConfigProvider> 包装 <App> 或有问题的组件，即 <Select> 并设置 renderEmpty道具功能。 API解释了renderEmpty的用法。

Property	Description	Type	Default	Version
renderEmpty	Set empty content of components. Ref Empty	function(componentName: string): ReactNode	-

import { ConfigProvider, Select } from "antd";

// ...

<ConfigProvider renderEmpty={() => "No people avaialable"}>
  <Select></Select>
</ConfigProvider>

Ant Design select 标签无数据重命名

Ant Design select tag no data rename

html

javascript

select

reactjs

antd