React

React

const a = 1

#React #Emotin

Emotion使用行内 CSS 属性时，如果遇到错误：

pragma and pragmaFrag cannot be set when runtime is automatic.

可以修改：tsconfig

"types": ["@emotion/react/types/css-prop"],

"jsx": "react-jsx",

"jsxImportSource": "@emotion/react"

可参考一下解决办法：

https://stackoverflow.com/questions/66965774/emotion-css-prop-and-nextjs-new-jsx-runtime-error-pragma-and-pragmafrag-canno

React 中使用 SVG

import { ReactComponent as SoftwareLogo } from "assets/software-logo.svg"

<SoftwareLogo width={"18rem"} color={"rgb(12,138,255)"} />

#Emotion

HTML Element pass Custom Property

在 Emotion 自定义 HTML 元素中使用自定义属性，报错解决办法：

"types": ["@emotion/react/types/css-prop"]

and ：定义泛型

#QA

How to fix missing dependency warning when using useEffect React Hook

如何忽略 Hook 中依赖缺失的提示信息：

useEffect(() => {
   // other code
   ...

   // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) 

#Bug

这种情况会造成循环渲染，因为 obj 被重复定义:

import React, { useState, useEffect } from "react"

export default function App() {
  const obj = { name: "Jack" }
  const [num, setNum] = useState(0)

  useEffect(() => {
    console.log("useEffect")
    setNum(num + 1)
  }, [obj])

  return <h1>{num}</h1>
}

但如果 obj 为基本类型，则不会造成无限循环。

#TS

例：获取 AntD Select 组件的所有属性：

type SelectProps = React.ComponentProps<typeof Select>

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
import styled from '@emotion/styled'

#Bug

关于 React 或 Vue 的部署问题

在部署上线后, 直接访问 https://xxx.com/about 或在 https://xxx.com/about 页面刷新会显示 404 错误。

这是因为如果 SPA 应用使用 history pushState ，那么必须添加一个重写规则。

解决方法:

• 使用 Hash Router
• 添加重写规则：
  Netlify: 在 public 目录中创建 _redirects 文件并写入 /* /index.html 200

https://docs.netlify.com/configure-builds/javascript-spas/#build-configuration-for-javascript-spas
https://stackoverflow.com/questions/58065603/netlify-renders-404-on-page-refresh-using-react-and-react-router

#Tips

React 中使用 React.componentProps<T> 获取一个组件其属性的类型。

#Bug #Tips

项目中遇到 ESlint 意料之中的报错，导致无法提交等情况时，可以考虑使用:

// eslint-disable-next-line 
//@ts-ignore