我尝试扩展数据表组件(材料表)以使其可翻译。它使用自己的组件作为ActionComponent
道具,其中有一些我喜欢翻译的字符串。
我扩展了MTablePagination组件,以使用名为localization
的道具中的翻译后的字符串,但是我无法使用它。 MtablePagination组件使用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
自己的道具的正确方法是什么?
答案 0 :(得分:2)
我必须再次回答我的问题之一...材质表已通过图标道具进行了增强,这与向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}/>}
/>