React Hoc 函数 return class

Question

函数作为 React 子项无效。如果您 return 组件而不是渲染中的 <Component />，则可能会发生这种情况。或者您可能打算调用此函数而不是 return 它。

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;

Answer 1

我觉得你用错了函数，函数OOO returns一个class那个class你可以用。我不知道你为什么要这样做，但这里是你如何使用 HOC：

//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;

Answer 2

This may happen if you return a Component instead of <Component /> from render

这正是您在这里所做的。调用 <OOO /> returns class 而不是 JSX 元素。

这实际上不是高阶组件，因为您没有将内部组件 Rem 作为参数。你打算这样做吗？那看起来像这样：

const withOOO = (InnerComponent) => {

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

class Rem extends Component { ... }

export default withOOO(Rem);

如果这只是一个使用 Rem 的组件，而不是 HOC，那么您不需要创建一个新的 class.

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

class Rem extends Component { ... }

export default OOO;

React Hoc 函数 return class

React Hoc function return class

reactjs

higher-order-components