我与重复不共戴天

需要封装的代码

require("icons/money.svg");
require("icons/chart.svg");
require("icons/tag.svg");
……
<ul>
    <li>
        <svg className={"icon"}>
            {/*其中money是id，就等于文件名*/}
            <use xlinkHref="#chart"/>
        </svg>
        <Link to="/tags">标签页</Link>
    </li>
    <li>
        <svg className={"icon"}>
            {/*其中money是id，就等于文件名*/}
            <use xlinkHref="#tag"/>
        </svg>
        <Link to="/money">记账页</Link></li>
    <li>
        <svg className={"icon"}>
            {/*其中money是id，就等于文件名*/}
            <use xlinkHref="#money"/>
        </svg>
        <Link to="/statistics">统计页</Link></li>
</ul>

封装代码

1. 抽出想通部分，封装一个函数组件Icon
2. 函数组件接收的参数，自定义类型，

type Props = {
    name: string;
}

3. require一个目录或者一个文件夹

const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext); 
try {importAll(require.context('icons', true, /.svg$/));} catch (error) {console.log(error);}

__WebpackModuleApi报错是因为我们的项目时基于typescript创建的，而TypeScript不认识这个全局变量，进行谷歌搜索，最后得到答案

安装@types/webpack-env(yarn add --dev @types/webpack-env@1.15.1)

封装好的代码

这是组件

const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {importAll(require.context('icons', true, /.svg$/));} catch (error) {console.log(error);}

// 声明参数的类型，类似于java中的实体类
type Props = {
    name: string;
}
const Icon = (props: Props) => {
    return (<svg className={"icon"}>
        {/*其中money是id，就等于文件名*/}
        <use xlinkHref={'#' + props.name}/>
    </svg>);
}

export { Icon }

这是对组件的引用

const Nav = () => {
    return (<NavWrapper>
        <ul>
            <li>
                <Icon name={"tag"}/>
                <Link to="/tags">标签页</Link>
            </li>
            <li>
                <Icon name={"money"}/>
                <Link to="/money">记账页</Link></li>
            <li>
                <Icon name={"chart"}/>
                <Link to="/statistics">统计页</Link></li>
        </ul>
    </NavWrapper>);
}

其他

• 抱着一个原则，我与重复不共戴天，能很快突破瓶颈
• typescript中，用any是懦夫的行为
• 搜索国外网站时，比如github的解答中，看看答案的点赞数，搜一搜关键词just之类
• 很多的错误，是项目工具问题，停止运行，然后重新yarn start
• 能解决很多莫名其妙依赖报错的万能的尝试，rm -rf node_modules，然后 yarn install
• 别人的笔记，www.zhihu.com/pin/1237683…