Расширение экспортируемого класса компонента в HOC

Question

Этот вопрос был как-то связан с 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 - это HOC ...

Я не знаю, как это расширить.Это вообще возможно?

На самом деле код в FormTab не очень большой, и копирование это решение.Я просто ненавижу это нравится.

Answer 1

Рекомендуется экспортировать исходный класс как именованный экспорт вместе с экспортом по умолчанию, но это не было сделано в FormTab модуле .

Хорошей практикой является раскрытие упакованного компонента(как можно увидеть в 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.