«Функции недопустимы как дочерний элемент React» при попытке использовать HOC из объекта модуля

Question

См. Код ниже, я пытаюсь использовать «HOC» из объекта модуля, возвращенного из IIFE, чтобы упростить задачу. Я сохраняю большую часть кода в файле HTML. Однако я получаю «предупреждение» (или действительно «ошибку», поскольку моя страница не отображается): «Функции недопустимы как дочерний элемент React».

Я пробовал пару вещей, которые не работают, сначала добавив () в конец withFoobar.HOC(Salutation)(), что мало чем отличается от предложенного здесь (https://stackoverflow.com/a/51220156/34806),, но это приводит к "Uncaught TypeError: Невозможно вызвать класс как функция ", который имеет смысл. Я также пытался предвосхитить возврат, но это просто приводит к синтаксической ошибке.

Без объекта модуля я основываю свой код в основном на этой сути: https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775 Но я хочу иметь возможность принять параметр в дополнение к компоненту, а затем сохранить его для дальнейшего использования. Возможно ли то, что я пытаюсь? Спасибо.

const withFooBar = (() => {
    let params;

    return {
        HOC: (ComponentWithFooBar, param) => class extends React.Component {
            constructor(props) {
              super(props);
              this.state = { data: null };
              params = params || [];
              params.push(param);
            }
            render() {
                return <ComponentWithFooBar {...this.props} data={this.state.data} />;
            }
        },
        getParams: {
            return params;
        }
    }
})();

ReactDOM.render(
    //<Salutation />,
    withFooBar.HOC(Salutation),
    document.getElementById('app-content')
);

Answer 1

Компонент высшего порядка возвращает компонент. render ожидает React элемент , а не компонент в качестве первого аргумента. Должно быть:

const SalutationWithFooBar = withFooBar.HOC(Salutation);

ReactDOM.render(
    <SalutationWithFooBar />,
    document.getElementById('app-content')
);