08 2022 档案
摘要：正文从这开始~ 总览 当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时，会产生"Rendered more hooks than during the previous render"错误。为了解决该错误，将所有的钩子移到函数组件的顶层，以及不要在条件中使用钩子。 这里有个示例用来展示错误是
阅读全文
摘要：正文从这开始~ 总览 当组件名称以小写字母开头时，会导致"Property does not exist on type 'JSX.IntrinsicElements'"错误。为了解决该错误，确保组件名称总是以大写字母开头，安装React声明文件并重启你的开发服务器。 这里有个示例用来展示错误是如何
阅读全文
摘要：
总览 CSS选择器允许你通过类型、属性、位于HTML文档中的位置来选择元素。本教程阐述了三个新选项:is()、:where()和:has()。 选择器通常在样式表中使用。下面的示例会找到所有<p>段落元素并将字重更改为粗体： p { font-weight: bold; } 你也可以在JavaScr
阅读全文
总览 CSS选择器允许你通过类型、属性、位于HTML文档中的位置来选择元素。本教程阐述了三个新选项:is()、:where()和:has()。 选择器通常在样式表中使用。下面的示例会找到所有<p>段落元素并将字重更改为粗体： p { font-weight: bold; } 你也可以在JavaScr
阅读全文
摘要：正文从这开始~ 总览 当event参数的类型不正确时，会产生"Property 'value' does not exist on type EventTarget"错误。为了解决该错误，将event的类型声明为React.ChangeEvent<HTMLInputElement> 。然后就可以通过
阅读全文
摘要：正文从这开始~ 总览 当我们不在事件处理函数中为事件声明类型时，会产生"Parameter 'event' implicitly has an 'any' type"错误。为了解决该错误，显示地为event参数声明类型。比如说，在input元素上，将处理change事件声明类型为React.Chan
阅读全文
摘要：正文从这开始~ 总览 当我们没有为函数组件或者类组件的props声明类型，或忘记为React安装类型声明文件时，会产生"Parameter 'props' implicitly has an 'any' type"错误。为了解决这个错误，在你的组件中明确地为props对象设置一个类型。 安装类型文件
阅读全文
摘要：
你如何确定一个JavaScript原生函数是否被覆盖？ 你不能--或者至少无法可靠地确定。有一些检测方法很接近，但你不能完全相信它们。 JavaScript原生函数 在JavaScript中，原生函数指的是其源代码已经被编译进原生机器码的函数。原生函数可以在JavaScript 标准内置对象（比如说
阅读全文
你如何确定一个JavaScript原生函数是否被覆盖？ 你不能--或者至少无法可靠地确定。有一些检测方法很接近，但你不能完全相信它们。 JavaScript原生函数 在JavaScript中，原生函数指的是其源代码已经被编译进原生机器码的函数。原生函数可以在JavaScript 标准内置对象（比如说
阅读全文
摘要：正文从这开始~ 总览 当我们试图访问一个类型为HTMLElement的元素上的value属性时，会产生"Property 'value' does not exist on type 'HTMLElement'"错误。为了解决该错误，在访问属性之前，使用类型断言将元素类型断言为HTMLInputEl
阅读全文
摘要：正文从这开始~ 总览 当我们在多选框上设置了checked 属性，却没有onChange 处理函数时，会产生"You provided a checked prop to a form field without an onChange handler"错误。为了解决该错误，可以使用defaultC
阅读全文
摘要：正文从这开始~ 总览 导致"Invalid hook call. Hooks can only be called inside the body of a function component"错误的有多种原因： react和react-dom的版本不匹配。 在一个项目中有多个react包版本。
阅读全文
摘要：正文从这开始~ 总览 当我们尝试在类组件中使用useState 钩子时，会产生"React hook 'useState' cannot be called in a class component"错误。为了解决该错误，请将类组件转换为函数组件。因为钩子不能在类组件中使用。 这里有个例子用来展示错
阅读全文
摘要：正文从这开始~ 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function"，可以将函数名的第一个
阅读全文
摘要：正文从这开始~ 总览 当我们有条件地使用useState钩子时，或者在一个可能有返回值的条件之后，会产生"React hook 'useState' is called conditionally"错误。为了解决该错误，将所有React钩子移到任何可能油返回值的条件之上。 这里有个例子用来展示错误是
阅读全文
摘要：
前言 CSS变量（官方称为自定义属性）是用户定义的值，它可以在你的代码库中设置一次并多次使用。它们使管理颜色、字体、大小和动画值变得更加容易，并确保整个web应用的一致性。 举个例子，你可以将品牌颜色设置为一个CSS属性（--primarycolor: #7232FA），并在任何使用品牌颜色的组件或
阅读全文
前言 CSS变量（官方称为自定义属性）是用户定义的值，它可以在你的代码库中设置一次并多次使用。它们使管理颜色、字体、大小和动画值变得更加容易，并确保整个web应用的一致性。 举个例子，你可以将品牌颜色设置为一个CSS属性（--primarycolor: #7232FA），并在任何使用品牌颜色的组件或
阅读全文
摘要：正文从这开始~ 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时，会产生"React Hook useEffect has a missing dependency"警告。为了解决该错误，禁用某一行的eslint规则，或者将变量移动到useEffect钩子内。 这里有
阅读全文
摘要：正文从这开始~ 总览 当我们忘记从函数中返回值时，会产生"Expected an assignment or function call and instead saw an expression"错误。为了解决该错误，确保显式地使用return语句或使用箭头函数隐式返回。 下面有两个示例来展示错误
阅读全文
摘要：正文从这开始~ 总览 当我们尝试使用默认导出来导出一个匿名函数时，会导致"Unexpected default export of anonymous function"警告。为了解决该错误，在导出函数之前，为函数赋予一个名称。 这里有个例子来展示警告是如何发生的。 // Header.js //
阅读全文
摘要：正文从这开始~ 总览 当我们为元素的onClick属性传递一个值，但是该值却不是函数时，会产生"Expected onClick listener to be a function"报错。为了解决该报错，请确保只为元素的onClick属性传递函数。 这里有个例子来展示错误是如何发生的。 // App
阅读全文
摘要：正文从这开始~ 总览 当我们尝试从函数组件中返回元素组成的数组时，会产生"Type '() => JSX.Element[]' is not assignable to type FunctionComponent"错误。为了解决该错误，可以将元素数组包裹在React片段中。 这里有个示例用来展示错
阅读全文
摘要：正文从这开始~ 总览 当我们试图将元素或react组件作为属性传递给另一个组件，但是属性的类型声明错误时，会产生"JSX element type does not have any construct or call signatures"错误。为了解决该错误，可以使用React.ElementT
阅读全文
摘要：正文从这开始~ 总览 在React中，为了解决"Cannot find namespace context"错误，在你使用JSX的文件中使用.tsx扩展名，在你的tsconfig.json文件中把jsx设置为react-jsx，并确保为你的应用程序安装所有必要的@types包。 这里有个例子来展示错
阅读全文
摘要：正文从这开始~ 总览 产生"Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render."错误，通常是因为以下两个原因
阅读全文
摘要：前言 在类Unix系统中，一个文件有可能被多个名字引用。我们使用链接来实现这一点，链接共有两种类型：硬链接和软链接，本文分别来介绍它们。 硬链接 硬链接也允许指向文件，但与符号链接的方式不同。它们是Unix创建链接的原始方式。默认情况下，每个文件都有一个单独的硬链接，该链接给出了文件的名称，当我们创
阅读全文
摘要：正文从这开始~ 总览 当我们从map()方法返回的两个或两个以上的元素具有相同的key属性时，会产生"Encountered two children with the same key"错误。为了解决该错误，为每个元素的key属性提供独一无二的值，或者使用索引参数。 这里有个例子来展示错误是如何发
阅读全文
摘要：正文从这开始~ 总览 当我们用一个null值初始化一个ref，但在其类型中不包括null时，就会发生"Cannot assign to 'current' because it is a read-only property"错误。为了解决该错误，请在ref的类型中包含null。比如说，const
阅读全文
摘要：正文从这开始~ 总览 当我们使用一个在浏览器中不存在的标签或以小写字母开头的组件名称时，会产生"The tag is unrecognized in this browser"React警告。为了解决该问题，只使用有效的标签名称，并将你的组件的第一个字母大写。 这里有个例子来展示错误是如何发生的。
阅读全文
摘要：前言 Linux 有三个常用的压缩命令：gzip、bzip2和 tar 。本文介绍它们的区别和简单用法。 压缩文件 数据压缩是去除数据中冗余部分的过程，需要通过压缩算法完成。这些算法可分为两类： 无损压缩：保留原始文件中包含的所有数据。 有损压缩：在进行压缩时删除数据，以便应用更多的压缩。当文件被恢
阅读全文
摘要：正文从这开始~ 总览 在React中，当我们为元素的style 属性传递字符串时，会产生"Style prop value must be an object"警告。为了解决该警告，使用从属性到值的映射。比如说，style={{paddingLeft: '15px'}} 。 这里有个例子来展示错误是
阅读全文
摘要：正文从这开始~ 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时，会产生"useNavigate() may be used only in the context of a Router component"警告。为了解决该问题，只在Router
阅读全文
摘要：正文从这开始~ 总览 当input的值被初始化为undefined，但后来又变更为一个不同的值时，会产生"A component is changing an uncontrolled input to be controlled"警告。为了解决该问题，将input的值初始化为空字符串。比如说，va
阅读全文
摘要：前言 I/O重定向允许我们将命令的输入和输出重定向到文件中，以及将多个命令连接到一起成为管道。本文就来介绍有关重定向的知识。 标准输入、输出、错误 输出包括两种类型： 程序的结果。被称为标准输出或者stdout。 状态以及错误信息。被称为标准错误或者stderr 。 除此之外，一些程序从标准输入st
阅读全文
摘要：正文从这开始~ 总览 当我们把一个input的初始值设置为null或者覆盖初始值设置为null时，会产生"valueprop on input should not be null"警告。比如说，初始值来自于空的API响应。可以使用一个回退值来解决这个问题。 这里有个例子来展示错误是如何发生的。 e
阅读全文
摘要：正文从这开始~ 总览 当我们为相同的组件传递相同的属性多次时，就会导致"No duplicate props allowed"警告。为了解决该警告，请确保只传递一次该属性。比如说，如果传递多次className属性，将它们连接成一个空格分隔的字符串。 下面的示例用来展示如何导致警告的。 const
阅读全文
摘要：正文从这开始~ 总览 当我们尝试在JSX代码中，直接渲染对象或者数组时，会产生"Objects are not valid as a React child"错误。为了解决该错误，在JSX代码中，使用map()方法来渲染数组或者访问对象的属性。 下面是错误如何发生的示例。 export defaul
阅读全文
摘要：正文从这开始~ 总览 为了解决"Warning: Can't perform a React state update on an unmounted component" ，可以在你的useEffect钩子中声明一个isMounted布尔值，用来跟踪组件是否被安装。一个组件的状态只有在该组件被挂载
阅读全文
摘要：正文从这开始~ 总览 当我们对一个不是数组的值调用map()方法时，就会产生"TypeError: map is not a function"错误。为了解决该错误，请将你调用map()方法的值记录在console.log上，并确保只对有效的数组调用map。 这里有个示例来展示错误是如何发生的。 c
阅读全文
摘要：正文从这开始~ 总览 当我们试图在其对应的DOM元素被渲染之前访问其current属性时，React的ref通常会返回undefined或者null。为了解决该问题，可以在useEffect钩子中访问ref，或者当事件触发时再访问ref。 import {useRef, useEffect} fro
阅读全文
摘要：前言 Linux中有两个比较命令，它们分别是comm和diff，在比较文本文件的版本时通常很有用。本文介绍它们的区别和简单用法。 comm命令 该命令对两个文本文件进行比较，并显示每个文件独有的行和它们共有的行。 假设我们有两个文件： 当我们运行comm file1.txt file2.txt时，我
阅读全文
