Antd过滤器下拉菜单不会在反应打字稿中呈现答案

【问题标题】：Antd Filter dropdown doesn't render in react typescriptAntd过滤器下拉菜单不会在反应打字稿中呈现
【发布时间】：2021-02-07 14:50:40
【问题描述】：

我正在尝试在 antD 中使用自定义过滤器，使用 react with typescript。它没有渲染任何东西，我不知道我做错了什么。

这是我返回列道具的函数：

const getColumnSearchProps = (dataIndex: string) => ({ 
    filterDropDown: 
    ({ 
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters 
    }: any) => (
      <div style={{ padding: 8 }}>
      <Input
        ref={ searchInput }
        placeholder={`Search ${dataIndex}`}
        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
        value={selectedKeys[0]}
      />
      <Space>
      <Button
        type="primary"
        onClick={() => handleSearch(selectedKeys, confirm)}
        icon={<SearchOutlined />}
        size="small"
        style={{ width: 90 }}
      >
        Search
      </Button>
      <Button size="small" style={{ width: 90 }}>
        Reset
      </Button>
      <Button
        type="link"
        size="small"
      >
        Filter
      </Button>
      </Space>
    </div>
  ),
  filterIcon: (filtered: boolean) => (
    <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
  ),
  onFilterDropdownVisibleChange: (visible: boolean) => {
    if (visible) {
      setTimeout(() => searchInput.current?.select(), 100);
    }
  }
    })

这就是我传播这些道具的方式：

const columns: any = [
    {
      title: 'Name',
      dataIndex: 'candidate',
      key: "candidate",
      width: '16.66%',
      render: (name: string) => cellRender(name),
      ...getColumnSearchProps("name")
    }
....

我想像这样渲染过滤器：

【问题讨论】：

标签： reactjs typescript antd

【解决方案1】：

您好，欢迎来到 Stackoverflow。看起来你的论点有些不一致。可能是由于从 AntD 示例中复制代码而没有更新所有必要的部分；-)

尝试改变

...getColumnSearchProps("name")

到

...getColumnSearchProps("candidate")

【讨论】：

是的，我已经更新了 AntD 示例以使用函数组件。我试图更改 getColumnSearchProps 的 dataIndex 参数，但它不起作用:(
接下来要检查（使用 debugger 或 console.log(columns) ）是 columns[0].filterIcon 存在并且是一个函数，并且如果调用它也会返回一个 React 对象。
哦，只是检查一下：我意识到我正在对问题所在做出假设。当您说“它不渲染任何东西”时，您期望看到的到底是什么不渲染？
我希望基本上看到呈现在 HTML 上的组件与它交互并执行搜索，似乎 'getColumnSearchProps()' 没有返回任何要呈现的内容:(
@JesperWe，你能看看这里吗stackoverflow.com/questions/66963268/…

【解决方案2】：

错误的命名是问题，“filterDropDown”而不是正确的“filterDropdown”。例如，通过将ColumnsType<MyInterface> 添加到列中，可以更轻松地检测到此类可能的错误。

还是感谢您的回答！

【讨论】：

【解决方案3】：

这是基于 AntD 文档的 TS 接口：

...    
filterDropdown: ({ 
             setSelectedKeys,
             selectedKeys,
             confirm,
             clearFilters 
        }: FilterDropdownProps) => {
 ...

export interface FilterConfirmProps {
   closeDropdown: boolean;
}
export interface ColumnFilterItem {
  text: React.ReactNode;
  value: string | number | boolean;
  children?: ColumnFilterItem[];
}
export interface FilterDropdownProps {
  prefixCls: string;
  setSelectedKeys: (selectedKeys: React.Key[]) => void;
  selectedKeys: React.Key[];
  confirm: (param?: FilterConfirmProps) => void;
  clearFilters?: () => void;
  filters?: ColumnFilterItem[];
  visible: boolean;
}

【讨论】：