React JS - ошибка нарушения инварианта при использовании HOC

Question

Изучая компонент более высокого порядка в реакции, я пытался использовать его в своем коде. При этом я получаю "Ошибка нарушения инварианта"

//Higher Order Component
const withStyles = (OriginalComponent) => {
  class NewComponent extends React.Component{
    render(){
      return <OriginalComponent />  
    }
  }
  return NewComponent;
}

class FancyButton extends React.Component {
  render() {
    return <button>Fancy button</button>;
  }
}


const App = props => {
//I am calling the HOC to get my updated component
  let Enhanced = withStyles(<FancyButton />);

  return (
      <Enhanced />
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Здесь я вызываю HOC (withStyles) и сохраняю возвращенный компонент в переменной «Enhanced». В компоненте приложения можно ли напрямую вызвать расширенный компонент как?

Я ожидаю, что на выходе должен быть элемент кнопки, но я получаю сообщение об ошибке "Нарушение инварианта"

Answer 1

Вы передаете результат визуализации FancyButton, тогда как вы должны были передать фактическую функцию компонента Смотрите ниже:

...
const App = props => {
//I am calling the HOC to get my updated component
  let Enhanced = withStyles(FancyButton);

  return (
      <Enhanced />
  );
};
...