Как засунуть в обертку компонент в React?

Question

[hood52]

Доброго времени суток.
Имеется компонент <Component prop={value} />.
Есть некая функция, которая оборачивает его

const withWrapper = (ComponentToWrap) => {
    return <div className="Wrapper"><ComponentToWrap /></div>
}

Однако при вызове

import Main from ...
...

render() {
    return (
        { withWrapper(Main) }
    );
}

...

должного результата не удается добиться, в консоли следующее сообщение

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

В чем проблема и как ее можно решить?

Comments

[beDenz]

Проверил ваш код, и все работает. Правда, рендер делал через функциональный компонент.

Answer 1

[0xD34F]

const withWrapper = (ComponentToWrap) => (props) => {
  return <div className="Wrapper"><ComponentToWrap {...props} /></div>;
};

const WrappedMain = withWrapper(Main);

render() {
  return (
    <WrappedMain />
  );
}