Pull out the useTags function

import {useState} from "react"; Const useTags = () = > {/ / custom hook must begin use const [tags, setTags] = useState < string [] > [[' clothes', 'food', 'live', 'line']); Late return {tags, setTags} / / to study why must export object rather than an array/tags/abbreviation: tags, setTags: setTags} export {useTags}Copy the code

Note: Custom hooks must start with use

TagList style

import Layout from ".. /components/Layout"; import React from "react"; import {useTags} from ".. /useTags"; import styled from "styled-components"; import Icon from "components/Icon"; const Taglist = styled.ol` font-size: 16px; background: white; > li { border-bottom: 1px solid #d5d5d9; line-height: 20px; padding: 12px 16px 12px 0; margin-left: 16px; display: flex; justify-content: space-between; align-items: center; } ` const Button = styled.button` font-size: 18px; border: none; padding: 8px 12px; background: #ffd833; border-radius: 4px; ` const Center=styled.div` display: flex; justify-content: center; align-items: center; flex-direction: column; ` const Space=styled.div` height: 16px; ` function Tags() { const {tags, setTags} = useTags(); Return (<Layout> <Taglist> {tag.map (tag => <li key={tag}> <span className="oneLine">{tag}</span> <Icon Name = "right" / > < / li >)} < / Taglist > < Center > < Space > / < Space > / < Space > / < Button > new tag < / Button > / < Space > < / Center > < / Layout >  ) } export default Tags;Copy the code

Change the type of the tag

  • In our previous program, we had a tag of type String, which held the tag name. However, when the user wants to change the name of the tag, the data corresponding to the tag has to be changed, which is inconvenient.
  • This can be avoided by changing the tag to a type with an ID and a name. Because the ID doesn’t change.
import {useState} from "react"; Const [tags, setTags] = useState<{id: number; Name: string} [] > [{id: 1, name: 'clothes'}, {id: 2, name:' food '}, {id: 3, name: 'live'}, {id: 4, name: 'line'}]); Return {tags, setTags}// Export {useTags}Copy the code

Note: After you change the type, the other corresponding code also needs to be changed

Tip:

  1. To rename WebStorm, right-click on the menu and click Rename to change the entire document
  2. When you change a data type, you want to find its type definition. You can define the row in the data, hold down CTRL + click the content, you can automatically jump

CreateId function

Let id = 0 const createId = () => {id += 1; return id; } export {createId}Copy the code

The createId() function is then used wherever there is an ID generation

import {useState} from "react"; import {createId} from "./lib/createId"; Const defaultTags= {id: createId(), name: 'id '}, {id: createId(), name:' id '}, {id: createId(), name: 'id '}, {id: createId(), name:' id '}, {id: createId(), name: 'id '}, {id: createId(), name:' id '} }, {id: createId(), name: 'line '}] const useTags = () => {tags, setTags = useState<{id: number; name: string }[]>(defaultTags); Return {tags, setTags}// Export {useTags}Copy the code
Let id = 0 class id {value: number; constructor() { id += 1; this.value = id } } export {Id}Copy the code
  • Usage:new Id
  • Benefits: Encapsulation operations can be more extensive

UseParams and findTag

Encapsulate findTag to useTags

const findTag = (id: number) => tags.filter(tag => tag.id === id)[0];
Copy the code
import React from "react"; import {useTags} from ".. /useTags"; import {useParams} from "react-router-dom"; type Params={ id:string } const TagEdit: React.FunctionComponent = () => { const {findTag} = useTags() let {id} = useParams<Params>(); const tag = findTag(parseInt(id)) return ( <div>{tag.name}</div> ) } export {TagEdit}Copy the code