为什么我得到：在返回的组件实例上找不到`render`方法：您可能忘记定义`render`答案

【问题标题】：Why I am getting: No `render` method found on the returned component instance: you may have forgotten to define `render`为什么我得到：在返回的组件实例上找不到`render`方法：您可能忘记定义`render`
【发布时间】：2021-11-19 21:37:39
【问题描述】：

这是我得到的错误：

No `render` method found on the returned component instance: you may have forgotten to define `render`.
    in Component (at withScreenDimensionHOC.js:11)

我将HOC包装到类组件时出现的错误

export default connect(mapStateToProps, mapDispatchToProps)(
  withScreenDimensionHOC(ClassComponent)
);

这就是我创建自定义钩子和 HOC 的方式

我创建了自定义钩子：

import { useEffect, useState } from 'react';

export const useScreenDimension = () => {
  const [width, setWidth] = useState(window.innerWidth);
  const [height, setHeight] = useState(window.innerHeight);

  useEffect(() => {
    const handleDimension = event => {
      setWidth(event.target.innerWidth);
      setHeight(event.target.innerHeight);
    };
    window.addEventListener('resize', handleDimension);
    return () => {
      window.removeEventListener('resize', handleDimension);
    };
  }, []);
  return { width, height };
};

HOC：

import React, { Component } from 'react';

import { useScreenDimension } from './useScreenDimension';

const withScreenDimensionHOC = () => {
  return props => {
    const { width, height } = useScreenDimension();
    return <Component width={width} height={height} {...props} />;
  };
};

withScreenDimensionHOC.displayName = 'withScreenDimensionHOC';

export default withScreenDimensionHOC;

然后将HOC 包装到类组件中


export default connect(mapStateToProps, mapDispatchToProps)(
  withScreenDimensionHOC(ClassComponent)
);

【问题讨论】：

标签： reactjs react-hooks higher-order-components react-class-based-component

【解决方案1】：

你正在尝试渲染 <Component>，React 的基础组件类。

它没有渲染方法，就像错误所说的那样。您将组件传递给 withScreenDimensionHOC 但忽略它。不要忽视它;)

你的意思可能是这样的：

const withScreenDimensionHOC = WrappedComponent => (
  props => {
    const { width, height } = useScreenDimension()
    return <WrappedComponent width={width} height={height} {...props} />
  }
)

【讨论】：