Solve the TAB when too many bookkeeping keyboard is squeezed out of the page

type Props = { className? : string scrollTop? : number// question mark indicates that this parameter can be passed without} const Layout: React.FunctionComponent<Props> = (props) => { const mainRef = useRef<HTMLDivElement>(null) useEffect(() => { setTimeout(()=>{ if (! mainRef.current) { return } mainRef.current.scrollTop = props.scrollTop! // The exclamation mark indicates that this parameter cannot be null},0)// The delay is set because the scrollbar has not been loaded when entering the page, and this code may not be valid. (0 means as soon as possible)}, [props.scrollTop]) return ( <Wrapper> <Main ref={mainRef} className={props.className}> {props.children} </Main> <Nav/> </Wrapper>)} layout. defaultProps = {// Default parameter Settings scrollTop: 0} export default Layout;Copy the code

Note: just enter the page scroll bar is not loaded, mainRef. Current. The scrollTop = props. ScrollTop! May not be valid, so you need to set latency to avoid this problem. (Delay time 0 indicates as soon as possible)

Deployment to making

The biggest problem with deployment is path errors that need to be changed

yarn build
yarn global add serve
serve -s build
Copy the code

A link will be generated and clicked to make sure the functionality is intact

You are advised to create a separate repository on GitHub to store builds

CD build// Go to the build directory // Upload the fileCopy the code
  • GitHub- settings-pages – Select source- click the link (if the link does not open, add the path after itindex.htmlDelete the added path and try again.

If blank: right-click developer tool -network- refresh the page

There is no project path in the path. Change the URL tohttps://jingxi-su.github.io/React-PocketBookWebsite/static/css/main.8a50928f.chunk.css

  • So how do you make a web page request the path above?

    • In pacjage.json, add “homepage”:”https://jingxi-su.github.io/React-PocketBookWebsite/” (different repositories have different links), and go to the upper directory CD.. The yarn build

    • Git init–git add.–git commit -m ‘init’ –git commit -m ‘init’ –git add

    • Then repeat GitHub- settings-pages – select source- click on the link (if the link does not open, add path index.html, refresh several times, delete the added path and try again) to get a preview

Note: In practice, go straight to the last step and don’t bother trying an unrequested path.

Additional: deploy.sh Deployment script

How to deploy the modification later?

  • Method one:
    • cd ..(Back to home directory)
    • yarn build
    • cd build
    • git init
    • git add .
    • git commit -m 'init'
    • Git remote add Origin
    • git push -u origin master -f

This method is cumbersome and needs to be rewritten for each deployment. You can write a script to automate the deployment

  • Method 2
    • cd ..(Back to home directory)
    • Create a new file in script ->deploy.sh (&& to keep the code moving forward)
#! /usr/bin/env bash yarn build && cd build && git init && git add . && git commit -m 'deploy' && git remote add origin [email protected]:Jingxi-Su/React-PocketBookWebsite.git && git push -u origin master -f cd -Copy the code
  • Command line operationchmod +x scripts/deploy.sh
  • You can use it directly latersh scripts/deploy.shRedeploy
  • Ps: This can be added to “scripts” in package.json"deploy":"sh scripts/deploy.sh", then just runyarn deployYou can!