редактировать компонент заголовка Transfer в библиотеке Ant Design

Question

используя компонент переноса в бесплатной версии ant design и пытаясь изменить текст заголовка таблицы

как это можно сделать?

Очень плохо в документах AntDesign, об этом ничего не сказано, я не хочу верить, что его не существует,

ссылка на демонстрационную песочницу; https://codesandbox.io/s/7uc1g?file= / индекс. js

Answer 1

Вы можете использовать title и выбрать AllLabels prop для редактирования заголовков. Оба реквизита принимают массивы. (Проверьте свою версию antd, если вы все еще не можете использовать эти реквизиты)

 titles={[<Tag color="geekblue">I am on Left</Tag>, <Tag color="geekblue">I am on right</Tag>]}

 selectAllLabels={[
                ({ selectedCount, totalCount }) => (
                  <span>
                    {selectedCount} of {totalCount}
                    <Tag color="geekblue">left</Tag>
                  </span>
                ), ({ selectedCount, totalCount }) => (
                  <span>
                    {selectedCount} of {totalCount}
                    <Tag color="geekblue">right</Tag>
                  </span>
                )
              ]}

Пример кодового окна

* . 1011 *https://codesandbox.io/s/table-transfer-ant-design-demo-v4wxj?file= / индекс js: 2936-3517

Answer 2

Вам следует взглянуть на исходный код: https://github.com/ant-design/ant-design/blob/master/components/transfer/index.tsx

Возможно, попробуйте поиграть с реквизитами "title" или locale.titles и посмотреть, что произойдет,

другие реквизиты:

export interface TransferProps {
  prefixCls?: string;
  className?: string;
  disabled?: boolean;
  dataSource: TransferItem[];
  targetKeys?: string[];
  selectedKeys?: string[];
  render?: TransferRender;
  onChange?: (targetKeys: string[], direction: string, moveKeys: string[]) => void;
  onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
  style?: React.CSSProperties;
  listStyle: ((style: ListStyle) => React.CSSProperties) | React.CSSProperties;
  operationStyle?: React.CSSProperties;
  titles?: string[];
  operations?: string[];
  showSearch?: boolean;
  filterOption?: (inputValue: string, item: TransferItem) => boolean;
  locale?: Partial<TransferLocale>;
  footer?: (props: TransferListProps) => React.ReactNode;
  rowKey?: (record: TransferItem) => string;
  onSearch?: (direction: TransferDirection, value: string) => void;
  onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => void;
  children?: (props: TransferListBodyProps) => React.ReactNode;
  showSelectAll?: boolean;
  selectAllLabels?: SelectAllLabel[];
}