diff --git "a/react\344\270\255\346\226\207\346\226\207\346\241\243\347\233\256\345\275\225\350\241\245\345\205\250.js" "b/react\344\270\255\346\226\207\346\226\207\346\241\243\347\233\256\345\275\225\350\241\245\345\205\250.js" new file mode 100644 index 0000000..80dd60c --- /dev/null +++ "b/react\344\270\255\346\226\207\346\226\207\346\241\243\347\233\256\345\275\225\350\241\245\345\205\250.js" @@ -0,0 +1,107 @@ +// ==UserScript== +// @name react中文文档目录补全-dev +// @version 0.0.5 +// @description 展示react中文文档右侧目录,支持2、3、4级目录 +// @author jade qiu +// @match https://zh-hans.reactjs.org/docs/* +// @match https://react.docschina.org/docs/* +// @icon https://zh-hans.reactjs.org/favicon.ico +// @grant GM_addStyle +// @require https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js +// @license MIT +// @namespace https://greasyfork.org/users/909394 +// ==/UserScript== + +;(function () { + 'use strict' + + const style = ` + .custom-ul { + padding: 10px 0 10px 20px; + font-size: 10px; + + background: #dadada; + } + .custom-li { + font-family: source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace; + font-size: 14px; + font-weight: 100; + min-width: 36em; + padding-top: 3px; + } + .custom-li-h3 { + padding-left: 20px; + } + .custom-li-h4 { + padding-left: 20px; + } + .custom-li:hover { + backgound-color: #61dafb; + } + .custom-li:first-child { + padding-top: 0; + } + ` + + GM_addStyle(style) + + let timer = null + + const render = function () { + let a = 0 + timer = setInterval(() => { + a++ + if (a === 5) { + clearInterval(timer) + return false + } + const currentPageTitle = document.querySelector('article header h1') + const allPageTitle = Array.from(document.querySelectorAll('ul[id^="section_"] a')) + const currentPageSecondLevelTitle = Array.from( + document.querySelectorAll('article>div>div>h2,article>div>div>h3,article>div>div>h4') + ) + allPageTitle.map((page) => { + const pageInnerText = page.innerText.replace(/^[0-9]\.\s/, '') + let run = undefined + if (pageInnerText === 'React' && currentPageTitle.innerText === 'React 顶层 API') { + run = true + } else if (pageInnerText === currentPageTitle.innerText) { + run = true + } + if (run) { + const ul = document.createElement('ul') + ul.classList.add('custom-ul') + currentPageSecondLevelTitle.map((second) => { + const co = second.cloneNode(true) + co.classList.add('custom-li', 'custom-li-' + co.nodeName.toLowerCase()) + ul.appendChild(co) + }) + if (page.parentNode.children.length >= 2) { + page.parentNode.removeChild(page.parentNode.childNodes[1]) + } + page.parentNode.appendChild(ul) + } + }) + }, 1000) + } + + // 监听浏览器的返回上一页事件 + window.addEventListener('popstate', function () { + clearInterval(timer) + render() + }) + + window.addEventListener('load', function () { + clearInterval(timer) + render() + }) + + window.addEventListener('click', (e, a) => { + const isA = e.path.find((path) => path.nodeName === 'A') + if (!isA) { + return true + } + clearInterval(timer) + render() + }) +})() diff --git a/usage-frame/react/react.md b/usage-frame/react/react.md index e4678e8..9d80ee8 100644 --- a/usage-frame/react/react.md +++ b/usage-frame/react/react.md @@ -1 +1,2 @@ -# react 基础知识 \ No newline at end of file +# react 基础知识 + diff --git "a/usage-project/\351\241\271\347\233\256\345\220\257\345\212\250\346\212\245\351\224\231\346\261\207\346\200\273-react.md" "b/usage-project/\351\241\271\347\233\256\345\220\257\345\212\250\346\212\245\351\224\231\346\261\207\346\200\273-react.md" new file mode 100644 index 0000000..ee6ed61 --- /dev/null +++ "b/usage-project/\351\241\271\347\233\256\345\220\257\345\212\250\346\212\245\351\224\231\346\261\207\346\200\273-react.md" @@ -0,0 +1,7 @@ +# react项目启动报错汇总 + +## 报错1:You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1). + +场景:运行命令`npx create-react-app my-app`创建react应用时出现该错误 + +解决方法:根据命令行提示删除全局包`npm uninstall -g create-react-app`无效,[网上查找内容](https://blog.csdn.net/tuzi007a/article/details/123333059),找到了解决思路,即重新安装该包,然后再运行命令创建react应用 \ No newline at end of file