Question

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

没关系，我将函数作为prop传递，并且我可以仅使用this.props来console.log该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的组件中访问道具？

1 个答案: