扩展组件类导出并包装在一个组中
扩展组件类导出并包装在一个组中
提问于 2019-02-17 05:23:34
这个问题与react-admin有关，直到我意识到问题是我正在扩展的组件实际上是被导出的。
我正在使用react- admin的TabbedForm和子FormTab来显示我的管理中的许多字段，并且我需要定制选项卡的布局。
基本上，我想用自定义布局来扩展FormTab。
但我什么也得不到。
以下是问题所在：
如果我为我的选项卡使用一个自定义组件，比如
import React from 'react';
import {
FormTab,
FormInput,
} from 'react-admin'
const hiddenStyle = { display: 'none' };
export class CustomFormTab extends FormTab {
renderContent = ({ children, hidden, ...inputProps }) => (
<span style={hidden ? hiddenStyle : null}>
{React.Children.map(
children,
child => React.cloneElement(child, {
...inputProps
})
)}
</span>
);
}
export const CustomFormTabPart = ({ children, className, ...inputProps }) => {
return (
<div className={className}>
{React.Children.map(
children,
input =>
input && (
<FormInput
{...inputProps}
input={input}
/>
)
)}
</div>
)
}这应该可以让我上手了，但我扩展的是FormTab，它不是作为一个简单的组件导出的。
// in react-admin/packages/ra-ui-materialui/src/form/FormTab.js
...
FormTab.displayName = 'FormTab';
export default translate(FormTab);translate是一个临时的.
我不知道如何扩展它。这有可能吗？
实际上，FormTab中的代码并不庞大，复制粘贴它是一种解决方案。我就是讨厌这样。
回答 1
Stack Overflow用户
发布于 2019-02-17 08:52:59
将原始类作为命名导出与默认导出一起导出是一种很好的做法，但这不是在FormTab module中完成的。
将封装的组件(可以在React Router的withRouter、React Redux的connect等中看到)作为装饰组件的静态属性公开是一个很好的做法，但这不是在translate HOC中完成的。
由于translate将原始FormTab组件与上下文组件包装在一起，因此快速修复方法是解构React组件的层次结构：
const translateContext = FormTab.prototype.render();
const callback = translateContext.props.children;
const OriginalFormTab = callback({ translate: () => {}, label: '' }).type;
@translate
export class CustomFormTab extends OriginalFormTab { ... }由于这是一种依赖于第三方库内部机制的黑客攻击，因此它可能会在新的库版本中被破坏，因此不建议使用它，或者至少需要编写单元测试来测试使用中的内部机制。
一个更合适的解决方案是派生一个库，修复所描述的缺点(在translate中公开包装的组件或/和从模块中导出原始组件)，然后提交PR。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54727782
复制相关文章
相似问题
腾讯云开发者
