如何访问用自定义 HOC 包装的组件中的道具？

Question

我创建了一个简单的 HOC，它使用自定义钩子来跟踪鼠标位置。我在 HOC 函数中使用了钩子，我想通过它将该值传递给包装的组件。

没关系，我将函数作为 prop 传递，我可以 console.log 使用 this.props 那个 prop。正如预期的那样，我在控制台中得到了输出 {position: {…}} 。当我展开那个日志对象时，我可以看到输出 position: {x: 479, y: 396}，这正是我想要的。

但是，当我想使用 this.props.position 访问实际对象时，它只会抛出一个错误：

TypeScript error in /Users/dvidovic/Projects/hooks-in-classes/src/components/HooksHOC.tsx(6,28):
Property 'position' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.  TS2339

这是 HOC：

import React from 'react';
import { useMousePosition } from '../hooks/useMousePosition';

export const withHooksHOC = (Component: any) => {
  return (props: any) => {
    return <Component position={useMousePosition()} {...props} />;
  };
};

这是包装的组件：

import React from 'react';
import { withHooksHOC } from './withHooksHOC';

class HooksHOC extends React.Component {
  render() {
    console.log(this.props); // this works
    console.log(this.props.position); // this throws an error
    return (
      <div style={{ marginTop: '100px', fontSize: '72px' }}>Some text</div>
    );
  }
}

export default withHooksHOC(HooksHOC);

我必须更改什么才能访问位置对象？

Answer 1

您需要将带有道具接口的泛型传递给 React.Component:

interface HooksHOCProps {
    position: {
        x: number;
        y: number;
    }
}

class HooksHOC extends React.Component<HooksHOCProps> {
...

如何访问用自定义 HOC 包装的组件中的道具？

How can I access props in a component wrapped with custom HOC?

reactjs

higher-order-components