Как добавить пользовательский реквизит в TablePagination ActionComponent? - PullRequest
Новая
       16

Как добавить пользовательский реквизит в TablePagination ActionComponent?

0 голосов
/ 12 декабря 2018

Я пытаюсь расширить компонент таблицы данных (material-table), чтобы сделать его переводимым.Он использует свой собственный компонент как ActionComponent prop, который имеет несколько строк, которые я хотел бы перевести.
Я расширил компонент MTablePagination, чтобы использовать переведенные строки из подпорки с именем localization, но я не могу использоватьЭто.Компонент MTablePagination экспортируется как hoc с использованием метода material-ui withStyles.
Если я пытаюсь использовать расширенный компонент, это приводит к следующему сообщению об ошибке: 

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got:
<WithStyles(MTablePaginationInner) />. Did you accidentally export a JSX literal instead of a component?

Используется оригинальный компонент TablePaginationкак это: 

import MTablePagination from './m-table-pagination';
<TablePagination
  ...
  ActionsComponent={MTablePagination}
/>

Где я пытаюсь использовать расширенный компонент, как это: 

import MTablePagination from './m-table-pagination';
const localization={someKey: 'some value'};
const pagination = <MTablePagination localization={localization}/>
<TablePagination
  ...
  ActionsComponent={pagination}
/>

Я довольно новичок в Material-UI, и я думаю, что я что-то неправильно понял, но яне могу найти ничего в документах, указывающих мне правильный путь ...
Каков будет правильный способ дать ActionComponent свой реквизит?

1 Ответ

0 голосов
/ 12 декабря 2018

Я должен снова ответить на один из моих вопросов ... таблица материалов была дополнена значком реквизита, который требует добавления пользовательских реквизитов к ActionComponent реквизиту ...

Они решили это, используя компонент как функцию: 

ActionsComponent={(subProps) => <MTablePagination {...subProps} icons={props.icons}/>}

Я постараюсь адаптировать это решение ...

- редактировать: добавить окончательный код --- 

import MTablePagination from './m-table-pagination';
const localization={someKey: 'some value'};
const pagination = <MTablePagination localization={localization}/>
<TablePagination
  ...
  ActionsComponent={(subProps) => <MTablePagination {...subProps} icons={props.icons} localization={localization}/>}
/>
...