Typescript TS2339:Typescript + React + Redux 应用程序中的“IntrinsicAttributes"类型不存在属性“queryType"? [英] Typescript TS2339: Property 'queryType' does not exist on type 'IntrinsicAttributes' in Typescript + React + Redux app?

问题描述

我在我的 react + redux 应用程序中使用了 typescript.我的一个组件使用了 react-redux 的连接.代码是这样的:

import * as React from 'react';从 'redux' 导入 * 作为 Redux从 'recompose/compose' 导入 compose；进口 {连接，来自'react-redux';从'../../../../../app/containers/pageTab/contexts/withContextId'导入withContextId；进口 {获取内容，} 来自'../../actions/workspaceActions';从 '../../interfaces' 导入 { HomePageQuery };interface Props 扩展 StateProps, DispatchProps {查询类型:字符串，请求参数，上下文 ID:字符串，}接口自己的道具{查询类型:字符串，请求参数，上下文 ID:字符串，}class ContentContainer 扩展 React.PureComponent{componentDidMount() {const { props } = this;props.fetchContent(props.queryType, props.query, props.contextId);}使成为() {返回 (<div>{'瓷砖容器'}

);}}接口 DispatchProps {fetchContent: (query: string, queryType: string, contextId: string) =>空白}function mapDispatchToProps(dispatch: Redux.Dispatch): DispatchProps {返回 {fetchContent: (query: string, queryType: string, contextId: string) =>{dispatch(fetchContent(query, queryType, contextId))}};}接口状态道具{}函数 mapStateToProps(state: any): StateProps {返回 {};}导出默认撰写(带有上下文 ID，连接(mapStateToProps, mapDispatchToProps),)(内容容器);

我阅读了 this 答案并尝试分离我的 StateProps、DispatchProps 和 OwnProps 但它仍然会给我这个错误.如何解决此错误?

我从它的父级接收 queryType 和 query 作为(这些是必需的道具):

解决方案

我在使用 hoc withContextId 时遇到了问题.显然 withContextId 是用 JS 编写的，它没有任何类型.

删除 compose 并执行以下操作帮助我解决了问题.一个拥有更多 typescript 知识的人可以了解它并使我理解，因为我仍然是一个新手.

export default connect(mapStateToProps、mapDispatchToProps)(withContextId(ContentContainer));

I'm using typescript in my react + redux application. One of my component make use of react-redux's connect. The code is something like this:

import * as React from 'react';
import * as Redux from 'redux'
import compose from 'recompose/compose';
import {
  connect,
} from 'react-redux';

import withContextId from '../../../../../app/containers/pageTab/contexts/withContextId';

import {
  fetchContent,
} from '../../actions/workspaceActions';

import { HomePageQuery } from '../../interfaces';

interface Props extends StateProps, DispatchProps {
  queryType: string,
  query: string,
  contextId: string,
}

interface OwnProps {
  queryType: string,
  query: string,
  contextId: string,
}

class ContentContainer extends React.PureComponent<Props, {}> {
  componentDidMount() {
    const { props } = this;

    props.fetchContent(props.queryType, props.query, props.contextId);
  }

  render() {
    return (
      <div>
        {'Tiles Container'}
      </div>
    );
  }
}

interface DispatchProps {
  fetchContent: (query: string, queryType: string, contextId: string) => void
}

function mapDispatchToProps(dispatch: Redux.Dispatch<any>): DispatchProps {
  return {
    fetchContent: (query: string, queryType: string, contextId: string) => {
      dispatch(fetchContent(query, queryType, contextId))
    }
  };
}

interface StateProps {
}

function mapStateToProps(state: any): StateProps {
  return {};
}

export default compose(
  withContextId,
  connect<StateProps, DispatchProps, OwnProps>(mapStateToProps, mapDispatchToProps),
)(ContentContainer);

I read this answer and tried separating my StateProps, DispatchProps and OwnProps but it'll still give me this error. How can I resolve this error?

[EDIT] I'm receiving queryType and query from it's parent as (and these are mandatory props):

解决方案

I had an issue with the hoc withContextId. Apparently withContextId is written in JS and it doesn't have any typings.

Removing compose and doing below thing helped me solve the issue. A person with more typescript knowledge can get to it and make me understand as I'm still a newbie.

export default connect<StateProps, DispatchProps, OwnProps>(
  mapStateToProps, mapDispatchToProps
)(withContextId(ContentContainer));

这篇关于Typescript TS2339:Typescript + React + Redux 应用程序中的“IntrinsicAttributes"类型不存在属性“queryType"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！