React使用笔记（持续更新中）

文件结构：

根目录（项目名）

        |-config

                |-config.jsx

        |-src

                |-taskpane

                        |-components

                                |-Login.jsx

                        |-taskpane.html

                        |-taskpane.jsx

                        |-index.jsx

        |-until

                |-common.jsx

until/common.jsx代码：

// utils/request.js
import { API_BASE_URL } from "@config/config";
// 封装 fetch
export async function request(url,options = {},token="") {const finalUrl = API_BASE_URL + url;let defaultOptions=false;if(token){defaultOptions = {headers: {"Content-Type": "application/json",'Authorization': `Bearer ${token}`,},mode: 'cors',  // 确保是 CORS 模式...options,};}else{defaultOptions = {headers: {"Content-Type": "application/json",},mode: 'cors',  // 确保是 CORS 模式...options,};}try {const res = await fetch(finalUrl, defaultOptions);if (!res.ok) {throw new Error(`请求失败: ${res.status} ${res.statusText}`);}// 自动解析 JSONconst data = await res.json();return data;} catch (err) {console.error("请求错误:", err);throw err;}
}// 便捷方法：GET
export function get(url,params=false,token="") {let queryString = "";if (params) {const searchParams = new URLSearchParams();params.forEach((item, index) => {searchParams.append(index, item);});queryString = `?${searchParams.toString()}`;}return request(url + queryString, { method: "GET" },token);
}// 便捷方法：POST
export async function post(url, params,token="") {return request(url, {method: "POST",body: JSON.stringify(params),},token);
}

config/config.jsx代码：

export const API_BASE_URL = "http://localhost";
export const API_URL = {Edit_Url:"/index/meal/dataupdate",Login_Url:"/index/meal/mlwlogin",
}

 一、如果要在对应文件中引用非同级的文件

例如：index.jsx中需要应用Login.jsx、until/common.jsx和config/config.jsx。引用Login.jsx文件可以直接./components/Logins.jsx。但是使用until/common.jsx和config/config.jsx就有两种方式。

import * as React from "react";
import Login from "./components/Login";
import { API_URL } from "@config/config";
import {post} from "@utils/common";const rootElementLogin = document.getElementById("container");
const rootLogin = rootElementLogin ? createRoot(rootElementLogin) : undefined;async function greetUser() {let params={userid:123};const result = await post(API_URL.Edit_Url, params);return <div><div>123</div><Login></Login></div>;
}

第一种：无需作配置，直接使用

import {API_URL} from "../../config/config.jsx";
import {post} from "../../until/commont.jsx";

第二种：需要做配置，可以直接使用定义的内容应用

import { API_URL } from "@config/config";
import {post} from "@utils/common";

配置内容：

//在tsconfig.json中加入配置
{"compilerOptions": {//配置根目录"baseUrl": ".","paths": {"@config/*": ["config/*"],"@utils/*": ["utils/*"]}
},//配置根目录"include": ["config", "utils"]
}
//项目类型，配置构建工具。一般就两种vite.config.ts或者webpack.config.js
//webpack.config.js：
const path = require("path");
module.exports = async (env, options) => {resolve: {alias: {"@config": path.resolve(__dirname, "config"),"@utils": path.resolve(__dirname, "utils")},},
});//vite.config.ts:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [react()],resolve: {alias: {'@config': path.resolve(__dirname, './config'),'@utils': path.resolve(__dirname, './utils')}}
})