useState
useState hooks的useState是一个泛型函数,可以传递一个类型来定义这个hooks,当然useRef也是一个泛型函数,如果想要严谨的话也可以传递给一个类型来来定义,还有useReducer等都差不多。
const [isShowAdd, setIsShowAdd] = useState<boolean>(false);
useContext
provider.js
import { createContext, Context } from 'react';
const providerContext :Context<any>= createContext({});
export default providerContext;
使用: a.tsx
mport { useState, useEffect, useContext } from 'react';
import providerContext from '../provider';
import E from './E';
const D = withRouter((props) => {
const [show, setShow] = useState(false);
const { name, age } = useContext(providerContext);
console.log(name);
console.log(age);
useEffect(() => {
baseUrl == curUrl ? setShow(true) : setShow(false);
}, []);
return (
<div>
{show && (
<div>
<h2>这是A的子组件D</h2>
<button onClick={pushTo}>去D的子路由</button>
</div>
)}
{/* <NavLink to="/a/d/e">去D的子路由</NavLink> */}
<Route path="/a/d/e" component={E}></Route>
</div>
);
});
// function D() {
// }
// D.title = 'ddddd';
// console.log(D.title);
export default D;
form表单event类型
一个react的form表单event的类型,正常结合antd的Form表单使用
<form
onSubmit={(e:FormEvent)=>{
e.preventDefault();//取消默认事件
}}>
// .....
</form>
onChange事件的event类型
<input
type="text"
value={count}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
setCount(e.currentTarget.value);//HTMLInputElement表示这个一个html的input节点
}} />
可选泛型类型:HTMLSelectElement
、HTMLInputElement
、HTMLDivElement
、HTMLTextAreaElement
等html标签的所有类型节点
返回组件类型
const renderComponent = (): ReactNode => {
const queryData = {}
switch (name) {
case 'A':
return <A />
case 'B':
return <B />
case 'C':
return <C />
case 'D':
return <D />
default:
return null
}
}
目前只总结到这些,后续有的话继续更新。