文件一般写法

// 引入统一封装api请求
import { getById } from "@/api";
// 引入ui组件库
import { Toast } from "antd-mobile";
// useEffect 类似vue中watch，或者moundted生命周期，视第二参数数据而定
// useState 是vue2的data、是vue3的ref或reactive，总之是动态绑定数据，用于视图使用
// useMemo 用于防止子组件随父组件变动而实时刷新，尤其是无畏刷新
import { useEffect, useState, useMemo } from "react";
// useSearchParams，查找路由后面？跟的数据
// useLocation,获取路由pathname
import { useSearchParams, useLocation } from "react-router-dom";
// 引入样式，如果以module方式命名，类似于vue中的scss scoped
import Styles from './index.module.less'
import '@/layout/navbar/index.less'
// 自用组件引入
import PvForm from "@/components/PvForm";
// searchRoute搜索路由总体参数（包含meta等）
import {searchRoute} from "@/router/utils/guard.jsx";
// rootRouter函数式路由 汇总
import {rootRouter} from "@/router/index.jsx";

const Station = (props) => {// 获取路由名const { pathname } = useLocation()const route = searchRoute(pathname, rootRouter)// * 获取自定义的路由配置const { nav } = route.meta// 记录当前滚动条距离const [scrollTop, setScrollTop] = useState(0);// 使用路由后? 跟随的参数const [searchParams, setSearchParams] = useSearchParams();// 传递组件参数 初始化	const [ tdInfo, setTdInfo] = useState({title: '土地资质',list: [{ name: 'projectReportImage',label: '项目可研报告', type: 'text', value: '', },],})// api接口获取信息处理const getDetail = (params, routeParams = { mode: 'YX'}) => {// 获取信息getById(params).then(res => {const { success, result, error} = resif (success) {judgeBuild(result); // 存储信息 } else {Toast.show({content: error || '信息获取失败'});}})}// 判断是否存在const judgeBuild = (res) => {const { projectType } = resconst isTdInfo = tabList.some(item => item.label === 'tdInfo')// 特定性逻辑处理if (['PUB_BUILD'].includes(projectType) && !isTdInfo) {const index = tabList.findIndex(item => item.label === 'information')tabList.splice(index+1, 0, {name: '资质',label: 'tdInfo'})setTabList(tabList)// 设置信息const { list } = tdInfoconst { stationCode } = resconst projectReportImage = res.projectReportImage ? `报告-${stationCode}` : '无'const landImage = res.landImage ? `性质-${stationCode}` : '无'const landContractImage = res.landContractImage ? `