Typescript、React 和 Recompose 问题

Question

提前为模糊的标题道歉，很难解决我的问题。

我正在尝试同时使用 React、Recompose 和 Typescript，但是在尝试将 props 传递到我的组件时出现以下错误：

[ts] Property 'bar' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, any, any>> & Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

组件是这样导入的：

import TestComponent from './TestComponent'

然后这样调用：

<TestComponent bar="hello"/>

这是我的组件文件夹的结构：

├── TestComponent.tsx
├── TestComponentContainer.ts
└── index.ts

index.ts如下：

import TestComponentContainer from './TestComponentContainer'

export default TestComponentContainer

TestComponent.jsx如下：

import * as React from 'react'

interface IProps {
  foo: string
  bar: string
}

const TestComponent: React.SFC<IProps> = ({ foo, bar }) => (
  <div>
    <p>{foo}</p>
    <p>{bar}</p>
  </div>
)

export default TestComponent

TestComponentContainer.ts如下：

import { compose, withProps } from 'recompose'

import TestComponent from './TestComponent'

export default compose(
  withProps({
    foo: 'stringy string string',
  }),
)(TestComponent)

我知道我遗漏了正在传递的 props 的某种类型声明，但我无法确定我应该做什么。

编辑：

此外，如何使用嵌套方法做到这一点：

export default compose(
  setDisplayName('PlayerCardContainer'),
  withMutation(mutation),
  withHandlers(createHandlers),
)(PlayerCard)

Answer 1

typing for compose is very generic and allows you to specify the type of the resulting component and the type of the component it can be called on .

出于这个原因，最好避免 compose 并简单地嵌套 HOC 调用：

import { withProps } from 'recompose';

import TestComponent from './TestComponent';

export default withProps({
  foo: 'stringy string string',
})(TestComponent);

编辑：

对于嵌套 HOC 而不是使用 compose 的添加代码示例，将如下所示：

export default setDisplayName('PlayerCardContainer')(
  withMutation(mutation)(
    withHandlers(createHandlers)(
      PlayerCard
    )
  )
);

Typescript、React 和 Recompose 问题

Typescript, React and Recompose issues

javascript

typescript

reactjs

recompose