☰

Typescript + React/Redux: 'IntrinsicAttributes & IntrinsicClassAttributes' 型にプロパティ "XXX" が存在しません 質問する

tag-icon • tag-icon reactjs typescript redux electron jsx
Typescript + React/Redux: '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);

明らかに、ここでは基本的な部分のみを取り上げており、この 2 つのクラスにはさらに多くの機能がありますが、有効なコードと思われるコードを実行しようとすると、依然としてエラーが発生します。発生しているエラーは次のとおりです。

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

最初にこのエラーが発生したとき、プロパティを定義するインターフェースを渡していないためだと思いましたが、それを作成したにもかかわらず (上記を参照)、まだ動作しません。何か見落としていることがあるのでしょうか?

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

ベストアンサー1

そこで、関連する回答（具体的にはこれですそしてこれです@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 の達人がこの回答に知識を加えたい場合は、喜んで修正します。

おすすめ記事