Блог

Функции недопустимы в качестве дочернего элемента React. Это может произойти, если вы вернете компонент вместо <Component /> отрисовки. Или, может быть, вы хотели вызвать эту функцию, а не возвращать ее.

 import './App.css';
import React, { Component } from 'react';
const OOO = () => {

    //console.log(this.props.children)
    return class extends Component {
        render() {
            return (
                <Rem {...this.props} />
            );
        }
    }
}

class Rem extends Component {
    render() {
        return (
            <p>Helo</p>
        )
    }
}

export default OOO;
 

Это может произойти, если вы вернете компонент вместо <Component /> отрисовки

Это именно то, что вы здесь делаете. Вызов <OOO /> возвращает элемент a class вместо элемента JSX.

На самом деле это не компонент более высокого порядка, потому что вы не принимаете внутренний компонент Rem в качестве аргумента. Вы собирались это сделать? Это выглядело бы примерно так:

 const withOOO = (InnerComponent) => {

    return class extends Component {
        render() {
            return (
                <InnerComponent {...this.props} />
            );
        }
    }
}

class Rem extends Component { ... }

export default withOOO(Rem);
 

Если это просто компонент , который использует Rem , а не СПЕЦИАЛЬНЫЙ, то вам не нужно создавать новый класс.

 const OOO = (props) => {
  return <Rem {...props} />;
};

class Rem extends Component { ... }

export default OOO;
 

Я думаю, что вы неправильно использовали функцию, функция OOO возвращает класс, и этот класс вы можете использовать. Я понятия не имею, зачем вам это нужно, но вот как вы можете использовать специальный:

 //your code in a file called OOO.js
import React, { Component } from 'react';
const OOO = () => {
  //you cannot log this.props here, it is not in the class
  //console.log(this.props.children)
  //I think you have to name the class but I'm not sure
  //Have not used classes in React for quite some time
  //even React documentation lists a large amount of
  //disadvantages using classes and it's only around for
  //legacy code
  return class MyComponent extends Component {
    render() {
      //here you can log this.props
      //console.log(this.props.children)
      return <Rem {...this.props} />;
    }
  };
};

class Rem extends Component {
  render() {
    return <p>Helo</p>;
  }
}

export default OOO;
//end of the OOO.js file

//here is how you can use it
import CreateComponent from 'OOO.js';
const Component = CreateComponent();
const MyComponent = ()=><Component />
export default MyComponent;