# base-react

**Repository Path**: ifihavewings/base-react

## Basic Information

- **Project Name**: base-react
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-31
- **Last Updated**: 2024-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 配置 style-jsx

## 1. 安装依赖
```bash
npm install vite @vitejs/plugin-react-refresh style-jsx --save-dev
npm install style-jsx
```
## 2. 配置 vite.config.js

```js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import reactRefresh from '@vitejs/plugin-react-refresh';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), reactRefresh()],

  resolve: {
    alias: {
      "@": "/src"
    }
  }
})
```
## 3. 解决 ts 语法警告

```ts
import 'react';

declare module 'react' {
  interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
    jsx?: boolean;
  }
}
```

3. fd 


IntrinsicAttributes 是 TypeScript 中的一个接口，用于表示 React 组件的内在属性（Intrinsic Attributes）。它是 React 中用于表示基本属性的一个接口。

在 TypeScript 中，当你定义一个组件时，React 组件的 props 默认会继承自 IntrinsicAttributes 接口。这个接口定义了一些常见的属性，例如 key 和 ref。key 属性用于 React 的 reconciliation 过程中标识列表中的每个元素，而 ref 属性用于引用组件的实例或 DOM 元素。

当 TypeScript 编译器给出类似 "Property 'dispatch' does not exist on type 'IntrinsicAttributes'" 的错误时，它实际上在提示你尝试将一个不合法的属性传递给了组件，因为该组件的 props 不包含该属性。这时候就需要检查你的组件的 props 定义，并确保传递的属性是正确的。



4. Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 

这个警告通常发生在 React 组件中使用受控组件（Controlled Component）的情况下。受控组件是指其值由 React 控制的表单元素，其值被 React 的状态所控制，并且在变化时通过事件处理函数来更新状态。

警告的原因是，组件中的一个输入框初始时是未受控的（uncontrolled），即其值为 undefined，然后在某个时刻变成了受控的（controlled），即其值从 undefined 变为了一个定义好的值。这种情况是不应该发生的，因为React不建议将未受控的输入框变成受控的，或者反过来。

要解决这个问题，你可以确保在组件中的输入框始终是受控的，即初始时就有一个定义好的值，并且在后续更新时使用状态来控制其值。或者，你也可以将输入框变成未受控的，即不通过 React 的状态来控制其值。