gpt4 book ai didi

javascript - Typescript、React 和 Recompose 问题

转载 作者:行者123 更新时间:2023-11-30 20:11:30 25 4
gpt4 key购买 nike

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

我正在尝试同时使用 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)

我知道我缺少对正在传递的 Prop 的某种类型声明,但我终究无法弄清楚我应该做什么。

编辑:

此外,如何使用嵌套方法做到这一点:

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

最佳答案

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
)
)
);

关于javascript - Typescript、React 和 Recompose 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52372932/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com