javascript - 如何在 React/Typescript 中定义历史和匹配类型(来自 React Router Dom)
问题描述
我有一个使用 React、React Router Dom(RRD)、Redux 和 Typescript 的项目。RRD 默认将match
and属性传递history
给我在 Route 组件属性中定义的子组件(见下文)。在我的组件内部,Redux 还在我的组件中添加了两个道具,一个函数(getPlaylist)和一个对象(auth)。
在我的组件中,当我输入所有道具时,我在输入match
和history
.
我试过以下没有运气:
- 添加了我的自定义道具的 RouteComponentProps
- 从 RRD导入
History
,如下所示: import { History } from "react-router-dom" 并将其用作类型(请参阅我的代码)
我的组件
import React, { useEffect, useState, useMemo, useLayoutEffect } from "react"
import { connect } from "react-redux"
import PropTypes from "prop-types"
import CreatePlaylist from "../components/playlist/CreatePlaylist"
import { getPlaylist } from "../actions/playlistActions"
import isEmpty from "../utils/isEmpty"
import { Auth, Playlist } from "interfaces"
import { RouteComponentProps } from "react-router"
import { History } from "react-router-dom"
type EditPlaystProps2 = {
getPlaylist: Function
playlist: Playlist
auth: Auth
}
interface EditPlaystProps {
history: History
auth: Auth
getPlaylist: Function
playlist: Playlist
match: any
}
function EditPlaylist({
history,
auth,
getPlaylist,
playlist,
match,
}: RouteComponentProps<EditPlaystProps2>) {
const [currentPlaylist, setcurrentPlaylist] = useState({})
useEffect(() => {
const { isAuthenticated } = auth
if (!isAuthenticated) {
history.push("/login")
}
}, [auth, history])
useLayoutEffect(() => {
getPlaylist(match.params.slug)
}, [getPlaylist, match.params.slug])
useMemo(() => {
const { isAuthenticated } = auth
if (!isAuthenticated) {
history.push("/login")
}
if (playlist) {
setcurrentPlaylist(playlist)
}
}, [auth, history, setcurrentPlaylist, playlist])
const editQupplistContent = () => {
const playlistsHaveLoaded = !isEmpty(currentPlaylist.playlist)
if (playlistsHaveLoaded) {
return (
<CreatePlaylist
name={currentPlaylist.playlist.name}
slug={currentPlaylist.playlist.slug}
id={currentPlaylist.playlist._id}
title="Edit playlist"
buttonText="Edit playlist"
/>
)
}
}
return (
<div>
<h1>Edit playlist</h1>
{editQupplistContent()}
</div>
)
}
EditPlaylist.propTypes = {
getPlaylist: PropTypes.func.isRequired,
playlist: PropTypes.object,
auth: PropTypes.object.isRequired,
}
const mapStateToProps = (state) => ({
auth: state.auth,
playlist: state.playlist,
})
export default connect(mapStateToProps, { getPlaylist })(EditPlaylist)
解决方案
type Props = RouteComponentProps & {
getPlaylist: Function,
playlist: Playlist,
auth: Auth,
}
像这样?
推荐阅读
- mysql - MySQL 按哈希分区:年和季度
- google-maps - Javascript - Google Map 多条不同颜色的折线
- javascript - 如何使用条件根据道具决定在两个页面之间显示的页面
- javascript - Vue DatePicker 在外部单击时重置手动输入值
- python - Python post请求返回响应400
- vue.js - vue路由器中的参数'to'和'from'未调用beforeEach函数,ESlint给我警告''to'已定义但从未使用'
- html - 如何使用 C shell 在 mutt 命令中附加 csv
- c++ - std::basic_string_view 之间的区别
和 std::span - python - 无法使用 conda 为 docker 映像安装依赖项
- python - 使用 Matplotlib 更新实时绘图