抽离useTags函数

import {useState} from "react";

const useTags = () => {//自定义hook必须use开头
    const [tags, setTags] = useState<string[]>(['衣', '食', '住', '行']);
    return {tags, setTags}//后期可以研究为什么必须导出对象而不是数组
    //缩写tags:tags,setTags:setTags
}

export {useTags}

注意：自定义hook必须use开头

tagList样式

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>
                {tags.map(tag =>
                    <li key={tag}>
                        <span className="oneLine">{tag}</span>
                        <Icon name="right"/>
                    </li>)}
            </Taglist>
            <Center>
                <Space/>
                <Space/>
                <Space/>
                <Button>新增标签</Button>
                <Space/>
            </Center>
        </Layout>
    )
}

export default Tags;

改变tag的类型

• 在之前的程序中，我们的tag类型为string，存放标签名。但是当用户想要更改标签名时，该标签所对应的数据也得做出改变，这很不方便。
• 将tag改为带有id和name的类型就可以避免这种情况。因为id是不变的。

import {useState} from "react";

const useTags = () => {//自定义hook必须use开头
    const [tags, setTags] = useState<{ id: number; name: string }[]>([
        {id: 1, name: '衣'},
        {id: 2, name: '食'},
        {id: 3, name: '住'},
        {id: 4, name: '行'}
    ]);
    return {tags, setTags}//后期可以研究为什么必须导出对象而不是数组
}

export {useTags}

注意：修改类型后，其他对应代码也需要修改

小技巧：

1. WebStorm改名需要选中右键在菜单中单击rename，这样可以改整个文档
2. 改变某数据类型时，想找到它的类型定义。可以在该数据定义行，按住ctrl+单击内容，即可自动跳转

createId函数

//函数写法
let id = 0
const createId = () => {
    id += 1;
    return id;
}

export {createId}

然后在所有具有id生成的地方，都用 createId() 这个函数来生成

import {useState} from "react";
import {createId} from "./lib/createId";

const defaultTags=[//防止每次调用，id都会重新生成
    {id: createId(), name: '衣'},
    {id: createId(), name: '食'},
    {id: createId(), name: '住'},
    {id: createId(), name: '行'}
]

const useTags = () => {//自定义hook必须use开头
    const [tags, setTags] = useState<{ id: number; name: string }[]>(defaultTags);
    return {tags, setTags}//后期可以研究为什么必须导出对象而不是数组
}

export {useTags}

//类写法
let id = 0

class Id {
    value: number;
    constructor() {
        id += 1;
        this.value = id
    }
}

export {Id}

• 用法：new Id
• 好处：封装操作可以更多

useParams与findTag

封装findTag到useTags

const findTag = (id: number) => tags.filter(tag => tag.id === id)[0];

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}