@ vx /使用TypeScript响应

Question

我正在尝试使用@vx/responsive库来获取父组件。 所以，这是我的部分代码：

import * as React from 'react'
import { inject, observer } from 'mobx-react'
import { IGlobalStateable } from '../../stores/global'
const { withParentSize } = require('@vx/responsive')

interface Props extends IGlobalStateable {
  marginBottom: number,
  data: DataAnalysisType[],
}

@inject('globalState')
@withParentSize
@observer
export class SectionA extends React.Component<Props> {
  render() {
    const { parentWidth, data, marginBottom, globalState } = this.props

  }
}

这是我得到的错误：

以前，我使用Javascript（不是TypeScript），并且一切正常。

欢迎任何提示。 谢谢

Answer 1

将高阶组件称为函数而不是装饰器。对于您的情况，为了以正确的名称导出包装的类，您需要以其他名称定义它，然后将调用函数的结果存储在具有最终名称的常量中。

class OriginalSectionA extends React.Component<Props> {
  render() {
    const { parentWidth, data, marginBottom, globalState } = this.props

  }
}

export const SectionA = inject('globalState')(withParentSize(observer(OriginalSectionA)));