web-dev-qa-db-ja.com

Typescript + React / Redux：プロパティ「XXX」はタイプ「IntrinsicAttributes＆IntrinsicClassAttributes」に存在しません

TypeScript、React、およびRedux（すべてElectronで実行）を使用してプロジェクトに取り組んでおり、あるクラスベースのコンポーネントを別のコンポーネントに含めてパラメーターを渡そうとすると問題が発生します。それらの間の。大まかに言うと、コンテナコンポーネントには次の構造があります。

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

明らかに私は基本のみを含めており、これらのクラスの両方にはるかに多くありますが、有効なコードのように見えるものを実行しようとすると、まだエラーが発生します。私が得ている正確なエラー：

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

私が最初にエラーに遭遇したとき、私は自分の小道具を定義するインターフェースを渡していないからだと思いましたが、それを作成しました（上で見ることができるように）、それはまだ動作しません。私は、私が行方不明になっているものがあるのだろうかと思っています。

ContainerComponentのコードからChildComponentプロパティを除外すると、（Childコンポーネントが重要なプロパティを持たないことを除いて）正常にレンダリングされますが、JSX TypeScriptではコンパイルが拒否されます。 この記事 に基づいた接続のラッピングと関係があると思いますが、その記事の問題はindex.tsxファイルで発生し、プロバイダーの問題であり、他の場所での私の問題。

reactjstypescriptreduxelectronjsx
55
Protagonist

したがって、いくつかの関連する回答（具体的には this one および this one を読んで、質問に対する@basaratの回答を見た後、自分に合ったものを見つけることができました。 （私の比較的新しいReactの目にとって）Connectのようなものは、コンテナコンポーネントに明示的なインターフェイスを提供していなかったので、通過しようとしている小道具によって混乱していました。

そのため、コンテナコンポーネントは同じままですが、子コンポーネントは少し変更されました。

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

上記は私のために働くことができた。コンポーネントがコンテナに期待している小道具を明示的に渡すと、機能しているように見え、両方のコンポーネントが適切にレンダリングされました。

注：これは非常に単純な答えであり、なぜこれが機能するのか正確にはわからないので、より経験豊富なReact忍者この回答に関する知識を少し減らしたいので、修正させていただきます。

40
Protagonist