boh*_*sty 4 reactjs material-ui
我尝试扩展数据表组件(材料表)以使其可翻译。它使用自己的组件作为ActionComponent道具,其中有一些我喜欢翻译的字符串。
我扩展了 MTablePagination 组件以使用来自名为 的道具的翻译字符串localization,但我无法使用它。MTablePagination 组件使用 material-uiwithStyles方法导出为 hoc 。
如果我尝试使用扩展组件,则会导致以下错误消息:
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?
Run Code Online (Sandbox Code Playgroud)
原来的 TablePagination 组件是这样使用的:
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?
Run Code Online (Sandbox Code Playgroud)
我尝试像这样使用扩展组件的地方:
import MTablePagination from './m-table-pagination';
<TablePagination
...
ActionsComponent={MTablePagination}
/>
Run Code Online (Sandbox Code Playgroud)
我对 material-ui 很陌生,我想我误解了一些东西,但我在文档中找不到任何指向我正确方法的东西......
提供ActionComponent自己的道具的正确方法是什么?
我必须再次回答我的一个问题......材料表已通过图标道具得到增强,同样需要向道具添加自定义道具ActionComponent......
他们使用组件作为函数解决了这个问题,例如:
ActionsComponent={(subProps) => <MTablePagination {...subProps} icons={props.icons}/>}
Run Code Online (Sandbox Code Playgroud)
我会尝试调整这个解决方案......
-- 编辑:添加最终代码 ---
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}/>}
/>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2134 次 |
| 最近记录: |