Как я могу получить доступ к реквизиту в компоненте, обернутом с пользовательским HOC? - PullRequest
Новая
       21

Как я могу получить доступ к реквизиту в компоненте, обернутом с пользовательским HOC?

0 голосов
/ 29 мая 2019

Я создал простой HOC, который использует пользовательский хук для отслеживания положения мыши. Я использую хук в функции HOC, и с его помощью я хочу передать это значение упакованному компоненту.

И это нормально, я передаю функцию как prop, и я могу console.log, которая поддерживает только с this.props. Я получаю вывод {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);

Что мне нужно изменить, чтобы получить доступ к объекту позиции?

1 Ответ

2 голосов
/ 29 мая 2019

Вам нужно передать универсальный интерфейс с вашими реквизитами React.Component: 

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

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