解决标签过多时记账键盘被挤出页面的情况

type Props = {
    className?: string
    scrollTop?: number//问号表示该参数可以不传
}

const Layout: React.FunctionComponent<Props> = (props) => {
    const mainRef = useRef<HTMLDivElement>(null)
    useEffect(() => {
        setTimeout(()=>{
            if (!mainRef.current) {
                return
            }
            mainRef.current.scrollTop = props.scrollTop!//感叹号表示该参数不可能为空
        },0)//设置延迟是因为刚进入页面时滚动条还未加载出来，本代码可能无效。（0表示尽快）
    }, [props.scrollTop])
    return (
        <Wrapper>
            <Main ref={mainRef} className={props.className}>
                {props.children}
            </Main>
            <Nav/>
        </Wrapper>
    )
}

Layout.defaultProps = {//默认参数设置
    scrollTop: 0
}

export default Layout;

注意：刚进入页面时滚动条还未加载出来，mainRef.current.scrollTop = props.scrollTop! 可能无效，因此需要设置延迟以避免这个问题。（延迟时间为0表示尽快）

部署到GitHub

部署的最大问题就是路径错误，需要更改路径

yarn build
yarn global add serve
serve -s build

这里会生成一个链接，点进去确定功能是否完好

建议直接在GitHub中单独建立仓库存放build

cd build//进入build目录
//上传

GitHub-Settings-Pages-选择source-点击链接（链接打不开就在后面添加路径index.html，多刷新几次，还不行就删除添加的路径再试）

如果显示空白：右键开发者工具-network-刷新网页

路径中没有项目路径，将URL变更为https://jingxi-su.github.io/React-PocketBookWebsite/static/css/main.8a50928f.chunk.css

那么如何让网页请求上面的路径呢？
- 在pacjage.json中加入"homepage":"https://jingxi-su.github.io/React-PocketBookWebsite/"（不同的仓库链接不同），进入上一级目录cd ..重新yarn build
- 重新进入build目录，注意，这里会把之前的build删除，所以需要重新 git init--git add .--git commit -m 'init' 上传仓库，push 有问题的话在末尾加入 -f 强制push
- 这时重复GitHub-Settings-Pages-选择source-点击链接（链接打不开就在后面添加路径index.html，多刷新几次，还不行就删除添加的路径再试），就可以得到预览了

注意：实际应用中，直接走最后一步，不要多此一举尝试未请求路径的方法。

附加：deploy.sh部署脚本

以后修改该如何部署？？

方法一：
- cd ..(回主目录)
- yarn build
- cd build
- git init
- git add .
- git commit -m 'init'
- git remote add origin +仓库地址（可以在clone中找到并复制）
- git push -u origin master -f

这种方法太麻烦，每次部署都需要重新写，可以做一个脚本使其自动部署

方法二
- cd ..(回主目录)
- 在script中新建文件->deploy.sh（&&是为了保证代码层层递进）

#!/usr/bin/env bash

yarn build &&
cd build &&
git init &&
git add . &&
git commit -m 'deploy' &&
git remote add origin git@github.com:Jingxi-Su/React-PocketBookWebsite.git &&
git push -u origin master -f
cd -

命令行运行chmod +x scripts/deploy.sh
以后就可以直接使用 sh scripts/deploy.sh 重新部署啦
ps：可以在package.json中的"scripts"中添加"deploy":"sh scripts/deploy.sh"，那么只需要运行 yarn deploy就可以啦

React果果记账-部署到GitHub

解决标签过多时记账键盘被挤出页面的情况

部署到GitHub

附加：deploy.sh部署脚本