代码之家 › 专栏 › 技术社区 › Armel Larcier

扩展打包在hoc中导出的组件类

react-admin reactjs

0

Armel Larcier · 技术社区 · 5 年前

这个问题和 react-admin 直到我意识到问题在于我正在扩展的组件实际上是导出的。

我在用一个反应管理员的 TabbedForm 和孩子 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>
    )
}

这会让我走的,但我会延长 格式标签 不是作为简单组件导出的。

// in react-admin/packages/ra-ui-materialui/src/form/FormTab.js
...
FormTab.displayName = 'FormTab';

export default translate(FormTab);

translate 是一个临时的…

我不知道该如何扩展。有可能吗?

实际上是代码 格式标签 不是很大,复制粘贴是一个解决方案。我就是讨厌这样。

0 回复 | 直到 5 年前

1

Estus Flask 5 年前

将原始类导出为命名导出和默认导出是一个很好的实践,但这不是在 FormTab module .

公开包装的组件是一个很好的实践(可以在react路由器的 withRouter ,React Redux的 connect 等等)作为修饰组件的静态属性,但这不是在 translate HOC .

自从 翻译 包装原稿 格式标签 组件和上下文组件,一个快速而肮脏的解决方案是解构react组件的层次结构:

const translateContext = FormTab.prototype.render();
const callback = translateContext.props.children;
const OriginalFormTab = callback({ translate: () => {}, label: '' }).type;

@translate
export class CustomFormTab extends OriginalFormTab { ... }

由于这是一种依赖于第三方库内部的黑客行为,新的库版本可能会破坏它,因此不建议这样做,或者至少需要编写单元测试来测试正在使用的内部。

更合适的解决方案是派生一个库,修复所描述的缺陷(在 翻译 或/和从模块中导出原始组件)并提交PR。