这个问题与2
有关，直到我意识到问题是我要扩展的组件实际上已导出。
我正在使用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);
是HOC ...
我不知道该如何扩展。那有可能吗？
实际上，translate中的代码并不庞大，将其复制粘贴是一种解决方案。我只是讨厌它。
答案 0 :(得分：1)
将原始类作为命名导出与默认导出一起导出是一个好习惯，但这在FormTab module中没有完成。
好的做法是将包装后的组件（如React Router的withRouter，React Redux的connect等显示为装饰组件上的静态属性），但这不是在{ {3}}。
由于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。