useState

UseRef is a generic function, which can be passed to a type to define the hooks. UseRef is also a generic function, which can be passed to a type to define the hooks, useReducer, etc.

const [isShowAdd, setIsShowAdd] = useState<boolean> (false);
Copy the code

useContext

provider.js

import { createContext, Context } from 'react';
const providerContext :Context<any>= createContext({});
export default providerContext;
Copy the code

Use: a.t sx

    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>This is A subcomponent D of A</h2>
          <button onClick={pushTo}>Subroute to D</button>
        </div>)} {/ *<NavLink to="/a/d/e">Subroute to D</NavLink>* /}<Route path="/a/d/e" component={E}></Route>
    </div>
  );
});
// function D() {

// }
// D.title = 'ddddd';
// console.log(D.title);

export default D;

Copy the code

Form form event type

A React form form is of the event type, normally used in conjunction with antD form forms

    <form 
	onSubmit={(e:FormEvent) = >{
	    e.preventDefault();// Cancel the default event}} >/ /...
    </form>
Copy the code

Event type of the onChange event

    <input 
	type="text" 
	value={count} 
	onChange={(e: ChangeEvent<HTMLInputElement>) = > {
	   setCount(e.currentTarget.value);//HTMLInputElement represents an HTML input node}} / >Copy the code

Optional generic types:HTMLSelectElement,HTMLInputElement,HTMLDivElement,HTMLTextAreaElementAll types of nodes such as HTML tags

Return component type

  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}}Copy the code

At present, only these are summed up, if there is any follow-up update.