预先为模糊的标题表示歉意,很难解决我的问题。
我试图同时使用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)
我知道我为正在传递的道具缺少某种类型声明,但无法终生确定我应该怎么做。
编辑:
此外,如何使用嵌套方法做到这一点:
export default compose(
setDisplayName('PlayerCardContainer'),
withMutation(mutation),
withHandlers(createHandlers),
)(PlayerCard)
答案 0 :(得分:1)
typing for compose is very generic和允许您指定结果组件的类型以及可以在but it doesn't ensure the type safety or compatibility of the functions handed to it上调用的组件的类型。
因此,最好避免使用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
)
)
);