Как обернуть функцию, которая содержит хуки с HoC

Question

Как следует из названия, я хочу иметь возможность обернуть функции (которые содержат) хуки в Ho C.

В приведенном ниже примере я хочу иметь возможность обернуть JSX от TestView с div тегом элемента, где className="someClassName". Однако я получаю следующее исключение:

Хуки могут вызываться только внутри тела компонента функции. Это может произойти по одной из следующих причин: 1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM). 2. Возможно, вы нарушаете правила хуков. 3. Возможно, у вас есть несколько копий React в Это же приложение. Посмотрите советы о том, как отладить и исправить это

import React, { Component } from 'react'

function wrap(component) {
    let calledComponent = component()
    return (
        <div className="someClassName">
          {calledComponent}
        </div>
    );
  }


function TestView() {
    const [ val, setValue] = React.useState('Initial Value');
    return (
        <div>
            <input type="text" value={val} onChange={event=>setValue(event.target.value)}/>
        </div>
    )

 }

 export default wrap(TestView);

.

Answer 1

Конкретно, компонент высшего порядка - это функция, которая принимает компонент и возвращает новый компонент. реагирует на документы

, поэтому у вас должна быть функция, которая возвращает компонент, возможно, вот так.

import React, { useState } from 'react';
import '../styles.css';

const withStyle = WrappedComponent => {
  return function WithStyle() {
    return (
      <div className='myClassStyle'>
        <WrappedComponent />
      </div>
    );
  };
};

function TestView() {
  const [val, setVal] = useState('Initial Value');
  return (
    <div>
      <input type='text' value={val} onChange={e => setVal(e.target.value)} />
    </div>
  );
}

export default withStyle(TestView);