时间戳

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

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

问题描述

这是我得到的错误：

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

包装HOCto 类组件时导致的错误

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

特设：

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

标签： reactjsreact-hookshigher-order-componentsreact-class-based-component

解决方案

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

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

你的意思可能是这样的：

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

推荐阅读