[解決済み] propsでmatchオブジェクトを参照するには、どのようなTypeScriptの型を使用すればよいですか?
2022-12-14 14:08:53
質問
Reactのコンテナ/コンポーネントにおいて、どの型を使えば
match
部分を参照するためにどのタイプを使用できますか?
interface Props {
match: any // <= What could I use here instead of any?
}
export class ProductContainer extends React.Component<Props> {
// ...
}
どのように解決するのですか?
明示的に追加する必要はありません。以下のように
RouteComponentProps<P>
から
@types/react-router
をプロップの基本インターフェースとして使用します。
P
はマッチパラメータの型です。
import { RouteComponentProps } from 'react-router';
// example route
<Route path="/products/:name" component={ProductContainer} />
interface MatchParams {
name: string;
}
interface Props extends RouteComponentProps<MatchParams> {
}
// from typings
import * as H from "history";
export interface RouteComponentProps<P> {
match: match<P>;
location: H.Location;
history: H.History;
staticContext?: any;
}
export interface match<P> {
params: P;
isExact: boolean;
path: string;
url: string;
}
関連
-
[解決済み】Typescriptで、! (エクスクラメーションマーク/バン)演算子でメンバを再参照するのは?
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み] react-navigation v5を使ったreact-nativeアプリのAppNavigatorの構文を更新する。
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
-
[解決済み] Reactのstateとpropsの違いとは?
-
[解決済み] Typescript オブジェクトのインデックス付きメンバの型を強制する?
-
[解決済み] TypeScriptのオブジェクトリテラルでの型定義
-
[解決済み] Typescript によるインターフェース型チェック
-
[解決済み] JSX.ElementとReactNodeとReactElementの使い分けは?
-
[解決済み】Reactの機能的なステートレスコンポーネント、PureComponent、Component、どのような違いがあり、いつ何を使うべきですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み] configuration.module に未知のプロパティ 'loaders' があります。
-
[解決済み] material-ui-pickers KeyboardDatePicker をモーメントで使用するには?
-
[解決済み] リアクトです。<tr>は<td>の子として表示できません。コメント > td > tr を参照してください。
-
[解決済み] 'Proptypes'が定義されていない
-
[解決済み] React - 予想外のトークン、予想外の;
-
[解決済み] validateDOMNesting警告React
-
[解決済み] 矢印本体を囲む予期せぬブロックステートメント
-
[解決済み] アクシオスは定義されていません
-
[解決済み] Reactでグローバル変数を宣言する方法とは?