Что-то пошло не так! Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция для HOC - PullRequest
Новая
       14

Что-то пошло не так! Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция для HOC

0 голосов
/ 06 августа 2020 
import React, { useState } from 'react';
import CreateProject from './CreateProjectWithName';

function Enhanced(WrappedComponent) {
  // ...and returns another component...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: []
      };
    }


    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}
const Wrapper = (props) => {
  const Comp = Enhanced(<CreateProject />);
  return (
    <div>

      <Comp />

      <div>
        {/* <button onClick={() => updateView()} /> */}
      </div>
    </div>
  );
};

Этот блок кода просто не будет работать. Что я делаю не так? Какие основные принципы React я упускаю? Как правильно визуализировать HO C?

Ответы [ 2 ]

1 голос
/ 06 августа 2020 
function Enhanced(WrappedComponent) {
  // ...and returns another component...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: []
      };
    }


    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}
const Wrapper = (props) => {
  const Comp = Enhanced(CreateProject );
  return (
    <div>

      <Comp />

      <div>
        {/* <button onClick={() => updateView()} /> */}
      </div>
    </div>
  );
};
1 голос
/ 06 августа 2020

HO C принимает ссылку на компонент, которую вы предоставляете, это экземпляр, когда вы используете его, например, 

const Comp = Enhanced(<CreateProject />);

Правильный способ: 

const Comp = Enhanced(CreateProject);

Также по соображениям производительности и для правильного выполнения жизненного цикла вы должны создать обернутый компонент с HO C вне вашего компонента 

const Comp = Enhanced(CreateProject);
const Wrapper = (props) => {

  return (
    <div>

      <Comp />

      <div>
        {/* <button onClick={() => updateView()} /> */}
      </div>
    </div>
  );
};
...