- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个路由器,可以传递位置和子项的 Prop ,但我不知道这些 Prop 的正确类型是什么。
这是使用 react-router-dom 的路由器...
import React, { useReducer } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { globalContext, setGlobalContext } from './components/context';
import { Layout } from './components/layout';
import { defaultState, globalReducer } from './components/reducer';
import { Home } from './routes/home';
import { NotFound } from './routes/notFound';
const Router: React.FC = () => {
const [global, setGlobal] = useReducer(globalReducer, defaultState);
return (
<setGlobalContext.Provider value={{ setGlobal }}>
<globalContext.Provider value={{ global }}>
<BrowserRouter>
<Route
render={({ location }) => (
<Layout location={location}>
<Switch location={location}>
<Route exact path='/' component={Home} />
<Route component={NotFound} />
</Switch>
</Layout>
)}
/>
</BrowserRouter>
</globalContext.Provider>
</setGlobalContext.Provider>
);
};
export { Router };
在布局组件内部,我有一个用于位置和子项的接口(interface),但由于我不知道这些的正确类型,我最终使用了任何类型,然后我的 linter 就会出现问题。
import React from 'react';
interface PropsInterface {
children: any;
location: any;
}
const Layout: React.FC<PropsInterface> = (props: PropsInterface) => {
return (
<div>
<p>{props.location}</p>
<p>{props.children}</p>
</div>
);
};
export { Layout };
我得到的错误是“any”的类型声明失去了类型安全性。考虑用更精确的类型替换它。 (no-any)tslint(1)
我可以从 import import { useLocation } from 'react-router-dom' 中获取位置吗;
最佳答案
Route
的接口(interface)您正在寻找的可以在 @types/react-router
中找到定义。
在您的项目中安装它之后,您应该能够使用如下界面来消除该 TS 错误:
// Layout.tsx
import { RouteProps } from "react-router";
interface ILayoutProps {
location: RouteProps["location"];
children: RouteProps["children"];
}
const Layout: React.FC<ILayoutProps> = (props: ILayoutProps) => {
return <div>{props.children}</div>;
};
请记住,location
是一个对象,所以 React 不会让你像以前那样渲染它。
这是一个工作示例的链接:https://codesandbox.io/s/zealous-snyder-yw9dg
另一种选择是使用 Partial接口(interface),但这将使所有 ILayoutProps
可选:
interface ILayoutProps extends Partial<RouteProps> {}
关于reactjs - react typescript : Correct types for Route location and children properties,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59005481/
我正在尝试在 python 中编写正则表达式来查找目录路径:我的文本如下所示: text = "The public disk is: \\\\diskA\\FolderB\\SubFolderC\\
我想写一个LocationListener,它把最近最精确的位置作为它的位置。我打算在我的 LocationListener 中使用此代码: @Override public void
我想建立一个有光泽和 plotly 的交互式图表。 Shiny 有一个内置功能来获取有关用户交互的信息。比如:input$plot_click、input$plot_dblclick、input$pl
我正在使用 MobileFirst 提供的 WL.Device.Geo.acquirePosition(onGeoLocationSuccess, onGeoLocationFailure, opti
我最近开始使用 ionic 框架,它里面有 angular js。为了在屏幕之间导航,我使用了 $location.path 并且效果很好。但是,在我下载的一个示例中,我看到 $state.go 被用
谁能解释一下这种行为?我使用 history.pushState(null, null, '#test'); 推送历史状态。然后,当尝试使用console.log(window.location.ha
这里是相关代码: https://www.facebook.com/sharer/sharer.php?u={{$location.absUrl()}} https://www.facebook.c
这两个重定向之间有什么区别?我有一个应用程序,当我使用时,它可以在 chrome 和 android 4 上正常工作,但在 android 2.x.x 上不能正常工作 document.locatio
JavaScript 的区别是什么 window.location.href = window.location.href 和 window.location.reload() 功能? 最佳答案 如果
有什么区别 window.location.href="http://example.com"; window.location.replace("http://example.com"); wind
JavaScript 的区别是什么 window.location.href = window.location.href 和 window.location.reload() 功能? 最佳答案 如果
以下 3 个指令之间有区别吗? location ~* \.(png)$ { expires max; log_not_found off; } location ~ \.(png)$ {
位于正文末尾之前的以下脚本在 Internet Explorer 和 Chrome(以及任何其他浏览器)中都会被调用。但重定向到指定的 URL 仅发生在 IE 中。我还尝试了 window.locat
我正在使用 Angular ngRouter。我需要更改 url 路径以及搜索参数。我知道 $location.path 和 $location.search,但是有没有一个函数可以同时设置它们? 最
在angularjs中用$location和window.location哪个更好。 例如,我们可以使用$location.path() 或window.location.href 来完成同样的工作。
我在我的网站上使用上述 2 个命令。似乎它们对 95% 访问它应该触发的页面的人有效,但对其他人则不会。 有谁知道是否可以完全阻止这些 javascript 命令?我真的很头疼为什么它们有时不起作用。
这是我无法弄清楚的另一个错误。 我有这个类ExtendedLocation extends Location实例化时抛出 ClassCastExceptioncurrentGpsLocation =
我一直在尝试简单地将一个包含两个变量(一个字符串和一个位置)的类推送和读取到 firebase,但我一直收到此错误。 **com.google.firebase.database.DatabaseEx
我注意到 iPhone 上的“常用位置”似乎比监控 iOS 访问的应用程序 (https://developer.apple.com/reference/corelocation/clvisit) 使
在我的 javascript 代码中,在某些时候,我需要刷新窗口(用户上传了新图片但在页面中仍然可以看到它) 我想知道为什么 location.href = location.href 不刷新窗口?
我是一名优秀的程序员,十分优秀!