react: typescript integrate withRouter

define interface:

export interface INav {
  nav: string
}

export interface IModuleItem {
  state?: string;
  type?: string;
  uri?: string;
}

use in Function Component:

import {INav} from "./path/to/menu.ts";

const AppNavigator = (props: INav & RouteComponentProps) => {
  const [currentNav, setCurrentNav] = useState<INav>(props.nav);
  ....
}

export default withRouter(AppNavigator);

原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/11240695.html

时间: 2024-08-02 19:25:00

react: typescript integrate withRouter的相关文章

React + TypeScript:元素引用的传递

React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. React 中的元素引用 正常的组件中,可通过创建对元素的引用来获取到某元素然后进行相应操作.比如元素加载后将焦点定位到输入框. class App extends Component { constructor(props){ super(props); this.inputRef = Reac

react + typescript 学习

react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react 文档.typescript 文档都看过,例子也敲过了,对此也都有了一定的理解,但是把二者很好的结合在一起,还是遇到了一些问题.纯粹记录一些,当然也希望有优秀资源的,提供一下,分享一下.提前道谢了~ 学习曲线 首先,想到的是到 官网,看相关文档,会系统些. typescript 中文网 jsx ty

React + TypeScript 默认 Props 的处理

React 中的默认 Props 通过组件的 defaultProps 属性可为其 Props 指定默认值. 以下示例来自 React 官方文档 - Default Prop Values: class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } // Specifies the default values for props: Gr

React+TypeScript

新建项目 新建工程文件夹 1 $ mkdir TypeScriptDemo && cd TypeScriptDemo 初始化工程 除了package name 其他都默认敲回车即可 1 2 3 4 $ npm init package name: (TypeScriptDemo) TypeScriptDemo ... Is this ok? (yes) yes 组织目录结构 src目录存放工程代码,dist最终由webpack生成 1 2 3 4 TypeScriptDemo/ ├─ di

在react typescript项目中如何使用没有@type定义的npm包

最近在用react重构我们的Angularjs项目,我使用的是create react-app 构建的 使用typescript的react项目 其中遇到一个问题就是有的npm包比如: react-loadable 在npm上是没有@types/react-loadable的那么我们如何在符合TS语法的基础上引入这个包呢? 首先正常npm install react-loadable --save 然后在项目中找到react-app-env.d.ts 加上以下代码即可: declare modu

使用react搭建组件库(二):react+typescript

1 使用了react官方脚手架:create-react-app https://github.com/facebook/create-react-app npm run eject 可以打开配置文件 自定义配置文件 执行安装: npx create-react-app ts-with-react --typescript npx 只有在npm5.2以上版本才有 1.避免安装全局模块:临时命令,使用后删除,再次执行的时候再次下载 2.调用项目内部安装的模块用起来更方便:比如 在package.j

[React] Use React.ReactNode for the children prop in React TypeScript components and Render Props

Because @types/react has to expose all its internal types, there can be a lot of confusion over how to type specific patterns, particularly around higher order components and render prop patterns. The widest and most recommended element type is React

react: typescript interface useState issue

define interface: interface ILoginState { imageId: string; imageSrc: string; username: string; password: string; verifyCode: string; } useState: const [loginData, setLoginData] = useState(loginState) update imageId && imageSrc: setLoginData({ ...l

react: typescript system params method optimize

import * as _ from "lodash"; import paramCache from "../common/param-cache" import RequestPromise from "./axios-service/RequestPromise"; export const fetchSystemParams = () => { return RequestPromise({ url: '/api/system-pa