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

问题描述

我正在使用Typescript，React和Redux(均在Electron中运行)开发一个项目，当我将一个基于类的组件包含在另一个组件中并试图在它们之间传递参数时，我遇到了一个问题.松散地说，容器组件具有以下结构:

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

子组件:

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?

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

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.

推荐答案

因此，在阅读了一些相关答案之后(特别是这个一个，然后看着@basarat对这个问题的回答，我设法找到了对我有用的东西.被它试图通过的道具弄糊涂了.

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.

注意::我知道这是一个非常简单的答案，我不确定为什么会这样，因此，如果经验丰富的React忍者想在此答案上丢下一些知识，我会很高兴对其进行修改.

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.

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