React Typescript - 在路由中传递时如何将类型添加到 location.state [英] React Typescript - How add Types to location.state when passed in a Route
问题描述
当我将 react-router props 传递给 Route 中的一个组件时出现错误,因为我有特定的状态,我传递了这个组件,但错误显示在我的 Route 中.
这是路线代码:
<路由精确的路径='/翻转时间线'渲染={道具=><FliplTimeline {...props}/>
在另一个组件中,我在下面称之为
props.history.push(`/flipltimeline`, {批准:singleFliplApprovals,调查号,单位:单位,成本:成本});
这是组件的代码.我终于得到了 Typescript 来编译它,但我不得不合并 LocationState &TimelineState 以使其正常工作.但是现在当我将道具发送到我的 FliplTimeline 组件时,Typescript 会抛出上面的屏幕截图.任何人都知道如何解决这个问题?
history.tsx
import { createBrowserHistory } from 'history';让 baseNameProd = '';if (process.env.NODE_ENV !== 'production') {console.log('看起来我们处于开发模式!');baseNameProd = '';} 别的 {baseNameProd = '/flipl';}const customHistory {基名:baseNameProd});导出默认自定义历史;
FliplTimeline.tsx
import * as React from 'react';从历史"导入{历史记录,位置状态};接口 FliplTimelineLocationState {批准:任何;调查ID:号码;单位:字符串;成本:数量;}接口 TimelineState{状态:翻转时间线位置状态;}界面道具{历史:历史;位置:LocationState &时间线状态;}功能翻转时间线(道具:道具){返回 (<ModuleTemplate title='状态时间线'副标题=''><FliplTimelineJumbotron className='bg-primary-darker shadow-4 line-height-serif-4'><跨度className='font-mono-2xl text-white'风格={{垂直对齐:'中间'}}>翻转{' '}</span><跨度className='font-mono-xl text-gold'风格={{垂直对齐:'中间'}}>{props.location.state.InvestigationID}</span>更新:添加了我的 history.tsx 文件,我在其中为 React-Router 创建了自己的历史记录.也在导入语句中添加.
更新:尝试将我的 FliplTimeline 组件更改为具有此界面
import { RouteComponentProps } from 'react-router-dom'功能翻转时间线(道具:RouteComponentProps){
我收到 2 个错误.第一个是这个,另一个说道具的形状是错误的.想法?
更新:我终于能够为我的组件获得正确的 props 声明.
import { RouteComponentProps } from 'react-router-dom';接口 FliplTimelineLocationState {批准:任何;调查ID:号码;单位:字符串;成本:数量;}功能翻转时间线(props: RouteComponentProps<{}, any, FliplTimelineLocationState |任何>)
解决方案 我能够让它工作.
import { RouteComponentProps } from 'react-router-dom';接口 FliplTimelineLocationState {批准:任何;调查ID:号码;单位:字符串;成本:数量;}功能翻转时间线(props: RouteComponentProps<{}, any, FliplTimelineLocationState |任何>)
I am getting an error when I pass react-router props sent to a component in a Route because I have specific state that I pass this component but the error shows up in my Route.
Here is the Route code:
<Route
exact
path='/flipltimeline'
render={props => <FliplTimeline {...props} />
In another component I call this below
props.history.push(`/flipltimeline`, {
Approval: singleFliplApprovals,
InvestigationID,
Unit: unit,
Cost: cost
});
Here is the code for the Component. I finally got Typescript to compile this but I had to merge LocationState & TimelineState to get this to work. But now Typescript throws the above screenshot when I send props to my FliplTimeline component. Anyone have and idea how to fix this?
history.tsx
import { createBrowserHistory } from 'history';
let baseNameProd = '';
if (process.env.NODE_ENV !== 'production') {
console.log('Looks like we are in development mode!');
baseNameProd = '';
} else {
baseNameProd = '/flipl';
}
const customHistory = createBrowserHistory({
basename: baseNameProd
});
export default customHistory;
FliplTimeline.tsx
import * as React from 'react';
import { History, LocationState } from 'history';
interface FliplTimelineLocationState {
Approval: any;
InvestigationID: number;
Unit: string;
Cost: number;
}
interface TimelineState{
state: FliplTimelineLocationState;
}
interface Props {
history: History;
location: LocationState & TimelineState;
}
function FliplTimeline(props: Props) {
return (
<ModuleTemplate title='Status Timeline' subtitle=''>
<FliplTimelineJumbotron className='bg-primary-darker shadow-4 line-height-serif-4'>
<div className='grid-row'>
<div className='grid-col-4'>
<span
className='font-mono-2xl text-white'
style={{
verticalAlign: 'middle'
}}
>
FLIPL{' '}
</span>
<span
className='font-mono-xl text-gold'
style={{
verticalAlign: 'middle'
}}
>
{props.location.state.InvestigationID}
</span>
Update: Added my history.tsx file in which I created my own history for React-Router. Also added in the import statements.
Update: Tried to change my FliplTimeline component to have this interface
import { RouteComponentProps } from 'react-router-dom'
function FliplTimeline(props: RouteComponentProps ) {
I get 2 errors. First one is this one and another that says that the shape of the props are wrong. Ideas?
Update: I was able to finally get the right props declaration for my component.
import { RouteComponentProps } from 'react-router-dom';
interface FliplTimelineLocationState {
Approval: any;
InvestigationID: number;
Unit: string;
Cost: number;
}
function FliplTimeline(
props: RouteComponentProps<{}, any, FliplTimelineLocationState | any>
)
解决方案 I was able to get it working.
import { RouteComponentProps } from 'react-router-dom';
interface FliplTimelineLocationState {
Approval: any;
InvestigationID: number;
Unit: string;
Cost: number;
}
function FliplTimeline(
props: RouteComponentProps<{}, any, FliplTimelineLocationState | any>
)
这篇关于React Typescript - 在路由中传递时如何将类型添加到 location.state的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文