タイプスクリプトです。Reactでhistoryオブジェクトの型チェックを追加する方法とは?
2023-10-05 03:39:56
質問
次のようなコードがあり、propとしてヒストリーオブジェクトを受け取ります。
const ChildComponent = ({ history }) => (
<div className={styles.body}>
<div className={styles.cta}>
<FloatingActionButton onClick={() => history.push(routes[4].path)}>
<span>Click me</span>
</FloatingActionButton>
</div>
</div>
);
このhistory propのtypecheckを追加するにはどうすればよいでしょうか。 で親をラップすることによって受け取られます。 ? 私が思いついた一つの方法は、このようなことを書くことです。
interface Props {
history: {
push(url: string): void;
};
}
しかし、これは正しい方法ではないことは確かです。なぜなら、履歴オブジェクトの残りのプロパティが失われてしまうからです。
正しい方法を教えてください。
Oblosysの回答に基づいてコードをUPDATEしました。
import { withRouter, RouteComponentProps } from "react-router-dom";
interface Props extends RouteComponentProps<any> {
/* Parent component's props*/
}
class Parent extends React.Component<Props, {}> {
render() {
return <ChildComponent history={this.props.history} />;
}
}
//Child component related stuff
interface ChildComponentProps extends RouteComponentProps<any> {}
const ChildComponent: React.SFC<ChildComponentProps> = (props) => (
<div className={styles.body}>
<div className={styles.cta}>
<FloatingActionButton onClick={() => history.push(routes[4].path)}>
<span>Click me</span>
</FloatingActionButton>
</div>
</div>
);
function mapStateToProps(state: types.AppState) {
/* related code */
}
function mapDispatchToProps(dispatch: Redux.Dispatch<types.AppState>{
/* related code */
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Parent));
しかし、今は以下のようなエラーが出ています。
Type '{ history: History; }' is not assignable to type 'ChildComponentProps'.
Property 'match' is missing in type '{ history: History; }'
どのように解決するのですか?
この場合
RouteComponentProps
で渡される全てのプロップを宣言するインタフェースです。
withRouter
:
import { RouteComponentProps } from 'react-router-dom';
..
interface ChildComponentProps extends RouteComponentProps<any> {
/* other props for ChildComponent */
}
const ChildComponent : React.SFC<ChildComponentProps> = ({ history }) => (
..
);
の型パラメータは
RouteComponentProps
の型は
params
のプロパティです。
match
というプロパティがあるので、名前付きパスセグメントをマッチングするのでなければ、これは必要ありません。
あるいは、もし
history
から来ていない場合は
withRouter
から来るのではなく、それ自身がプロップとして渡される場合、その型をインポートすることができます。
history
:
import { History } from 'history';
..
interface ChildComponentProps {
history : History
/* other props for ChildComponent */
}
const ChildComponent : React.SFC<ChildComponentProps> = ({ history }) => (
..
);
関連
-
[解決済み] MUI Boxは何のためのコンポーネントですか?
-
[解決済み] Reactプロジェクトに.envファイルを追加する
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] Reactコンポーネントに条件付きで属性を追加するにはどうすればよいですか?
-
[解決済み] TypeScriptでオブジェクトに動的にプロパティを割り当てるには?
-
[解決済み] Typescript オブジェクトのインデックス付きメンバの型を強制する?
-
[解決済み] TypeScriptのオブジェクトリテラルでの型定義
-
[解決済み] Typescript によるインターフェース型チェック
-
[解決済み] TypeScriptのクラス型チェック
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] テスト
-
[解決済み】React Propsが定義されていません。
-
[解決済み] React.createElement: type is invalid -- expected a string.
-
[解決済み] ReactJS giving error Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] カスタマイズ素材UI チェックした場合としない場合の切り替え
-
[解決済み] axios-mock-adapter onGet mock data not effective.
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。
-
[解決済み] React Hooksの「exhaustive-deps」lintルールを理解する
-
[解決済み] 拡張子.tsと.tsxの違いは何ですか?どちらもreactのタイプスクリプトファイルの拡張子として使用されます。では、どこで使うべきなのでしょうか?
-
[解決済み] Reactのrender()にFont Awesomeのアイコンを入れる方法