Typescript + React/Redux:属性“XXX"'IntrinsicAttributes & 类型不存在内在类属性 [英] Typescript + React/Redux: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

问题描述

我正在处理一个带有 Typescript、React 和 Redux(都在 Electron 中运行)的项目，当我在另一个组件中包含一个基于类的组件并尝试在它们之间传递参数时遇到了问题.粗略地说，我的容器组件具有以下结构:

class ContainerComponent extends React.Component{..使成为() {const { propToPass } = this.props;...<ChildComponent propToPass={propToPass}/>...}}....导出默认连接(mapStateToProps，mapDispatchToProps)(ContainerComponent)；

和子组件:

interface IChildComponentProps 扩展 React.Props;{propToPass:任何}class ChildComponent 扩展 React.Component{...}....导出默认连接(mapStateToProps，mapDispatchToProps)(ChildComponent)；

显然，我只包括基础知识，这两个类还有更多内容，但是当我尝试运行看起来像有效代码的代码时，我仍然遇到错误.我得到的确切错误:

<块引用>

TS2339:属性 'propToPass' 不存在于类型 'IntrinsicAttributes &IntrinsicClassAttributes<Component<{}, ComponentState>>&只读<{孩子...'.

当我第一次遇到错误时，我认为这是因为我没有传入定义我的道具的界面，但我创建了它(如您所见)，但它仍然不起作用.我想知道，有什么我想念的吗?

当我从 ContainerComponent 的代码中排除 ChildComponent 道具时，它呈现得很好(除了我的 ChildComponent 没有关键道具)但在 JSX Typescript 中使用它拒绝编译它.我认为这可能与基于 这篇文章的连接包装有关.a>，但是那篇文章中的问题出现在 index.tsx 文件中，并且是提供程序的问题，我在其他地方遇到了问题.

解决方案

所以在阅读了一些相关的答案后(特别是 这个 和这个一个并查看@basarat对问题的回答，我设法找到了对我有用的东西.看起来(在我相对较新的React眼中)Connect没有为容器组件提供显式接口，所以它被它试图通过的道具弄糊涂了.

所以容器组件保持不变，但子组件发生了一些变化:

interface IChildComponentProps 扩展 React.Props;{...(组件需要的其他道具)}接口 PassedProps 扩展了 React.Props{propToPass:任何}class ChildComponent 扩展了 React.Component<IChildComponentProps &PassedProps，任何>{...}....导出默认连接<{}, {}, PassedProps>(mapStateToProps, mapDispatchToProps) (ChildComponent);

以上方法对我有用.显式传递组件期望从容器中获得的 props 似乎可以正常工作，并且两个组件都可以正确呈现.

注意:我知道这是一个非常简单的答案，我不确定为什么会这样，所以如果一个更有经验的 React ninja 想在这个答案上放下一些知识，我会很高兴修改它.

I'm working on a project with Typescript, React and Redux (all running in Electron), and I've run into a problem when I'm including one class based component in another and trying to pass parameters between them. Loosely speaking, I've got the following structure for the container component:

class ContainerComponent extends React.Component<any,any> {
  ..
  render() {
    const { propToPass } = this.props;
    ...
    <ChildComponent propToPass={propToPass} />
    ...
  }
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

And the child component:

interface IChildComponentProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps, any> {
  ...
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

Obviously I'm only including the basics and there is much more to both of these classes but I'm still getting an error when I try and run what looks to me like valid code. The exact error that I'm getting:

TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

When I first encountered the error I thought it was because I wasn't passing in an interface defining my props, but I created that (as you can see above) and it still doesn't work. I'm wondering, is there something I'm missing?

When I exclude the ChildComponent prop from the code in the ContainerComponent, it renders just fine (aside from my ChildComponent not having a critical prop) but with it in the JSX Typescript refuses to compile it. I think it might have something to do with the connect wrapping based on this article, but the problems in that article occurred in the index.tsx file and were a problem with the provider, and I'm getting my problems elsewhere.

解决方案

So after reading through some related answers (specifically this one and this one and looking at @basarat's answer to the question, I managed to find something that works for me. It looks (to my relatively new React eyes) like Connect was not supplying an explicit interface to the container component, so it was confused by the prop that it was trying to pass.

So the container component stayed the same, but the child component changed a bit:

interface IChildComponentProps extends React.Props<any> {
  ... (other props needed by component)
}

interface PassedProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps & PassedProps, any> {
  ...
}

....
export default connect<{}, {}, PassedProps>(mapStateToProps, mapDispatchToProps)    (ChildComponent);

The above managed to work for me. Passing explicitly the props that the component is expecting from the container seemed to work and both components rendered properly.

NOTE: I know this is a very simplistic answer and I'm not exactly sure WHY this works, so if a more experienced React ninja wants to drop some knowledge on this answer I'd be happy to amend it.

这篇关于Typescript + React/Redux:属性“XXX"'IntrinsicAttributes &amp; 类型不存在内在类属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！