react hooks + ts 用法

1,436 阅读1分钟

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节点
      }} />

可选泛型类型:HTMLSelectElementHTMLInputElementHTMLDivElementHTMLTextAreaElement等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
    }
  }

目前只总结到这些,后续有的话继续更新。