React 常用写法

新建组件

新建文件

import React from 'react'

interface RobotProps {
  id: number
  name: string
  email: string
}

const Robot: React.FC<RobotProps> = ({ id, name, email }) => {
  return (
    <>
      <img src={`https://robohash.org/${id}`} alt={name} />
      <h2>{name}</h2>
      <div>{email}</div>
    </>
  )
}

export default Robot

引入文件

import styles from './App.css'
import robots from './mockdata/robots.json'
import Robot from './components/Robots'

function App() {
  return (
    <ul>
      {robots.map(r => {
        {
          return (
            <li>
              <Robot key={r.id} id={r.id} name={r.name} email={r.email} />
            </li>
          )
        }
      })}
    </ul>
  )
}

export default App

CSS 模块化

根目录 react-app-env.d.ts 文件中添加 css 文件类型声明

/// <reference types="react-scripts" />
declare module '*.css' {
  const classes: { readonly [key: string]: string }
  export default classes
}

组件旁新建 组件名.module.css 文件，并在其中书写 css 样式

.app {
    background: #f00;
    width: 100px;
    height: 100px;
}

组件中引入 css 文件，并替换 className 值

import styles from './组件名.module.css'
function App() {
  return (
    <div className={styles.app}></div>
  )
}

export default App

为 vscode 配置 css 模块化智能提示

【仓库地址】 【参考文档】

1. 安装 typescript-plugin-css-modules

npm install -D typescript-plugin-css-modules

2. 将插件添加到您的 tsconfig.json

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

3. 打开任意一个 ts 文件，点击 vscode 右下角的 typescript 旁边的 {}，然后点击 选择版本，在顶部弹出的菜单中点击 使用工作区版本，会自动生成 .vscode 文件夹

4. 重启 vscode，如果有提示，点击 允许 即可