Как реализовать через HOC, react?

Question

[cester]

Добрый день! Подскажите пожалуйста как данный компонент реализовать через HOC?

const SortableItem = SortableElement(({value}) => (
 <ElementItem value={value}/>
));

Просто нужно еще чтобы компонент `SortableElement ` принял все пропсы.
То есть надо чтоб в 'ElementItem ' было как-то так и все работало
export default hocComponent(ElementItem)

Буду благодарен за помощь!

Answer 1

[Антон Спирин]

Без параметров:

const withSort = WrappedComponent => props => {
  return WrappedComponent ? <WrappedComponent {...props} /> : null;
});

Использование:
export default withSort(Component);

C параметрами:

const withSort = (...params) => WrappedComponent => props => {
  // params usage
  return WrappedComponent ? <WrappedComponent {...props} /> : null;
});

Использование:

export default withSort(param1, param2)(Component);

Comments

[cester]

Спасибо

Answer 2

[0xD34F]

Просто нужно еще чтобы компонент `SortableElement ` принял все пропсы.

Ну так и передавайте все:

const SortableItem = SortableElement((props) => (
  <ElementItem {...props} />
));

Comments

[cester]

нужна возможность вместо етого <ElementItem /> передать любой другой компонент
Нужно как то так

const SortableItem = SortableElement(({ ...props }) => ChildComponent => {
  return ChildComponent ? <ChildComponent {...props} /> : null;
});

export default SortableItem;

и в нужном компоненте так
export default SortableItem(ElementItem );

Но сейчас у меня ошибка Cannot call a class as a function

[0xD34F]

cester,

const Sortable = ElementItem => props => (
  <ElementItem {...props} />
);

Ну и передавайте ему, что надо:
const SortableItem = Sortable(Item);