react实战——react旅游网

本文详细介绍了在使用React和TypeScript开发过程中遇到的问题,如引入antd、处理react-router版本间的差异、函数组件类型定义、使用Redux和react-redux、I18n国际化、网络请求和错误处理等内容。
摘要由CSDN通过智能技术生成

搭建项目

创建基于typescript的react项目:create-react-app react-travel --template typescript
安装依赖:npm install typescript-plugin-css-modules --save-dev

问题

1.按照官网在index.tsx中引入antd出错?

出错时因为路径问题:官网中是:import 'antd/dist/antd.css';,但是在依赖目录中没有antd.css文件,只有reset.css,所以改变路径即可:
import 'antd/dist/reset.css';

2.typescript中如何使用react-router

  1. react-router并没有提供原生typescript的支持,所以我们需要安装react-router的类型定义,
    npm install --save-dev @types/react-router-dom
    typescript的支持我们只在开发过程中使用,所以安装的开发依赖中-dev(结余上线后的体积)
  2. 怎么样我们才能知道一个框架有没有原生的支持typescript呢:
    -上网搜
    -直接使用,没有出现类型的提示警告之类的,就是支持的。

3.react-router

3.1 V6

在这里插入图片描述
<Route path="*" element={<p>There's nothing here: 404!</p>} />

3.2 V5

函数式组件中使用
在这里插入图片描述
在这里插入图片描述

3.3V6实现私有路由

在这里插入图片描述
在这里插入图片描述
解决方案:
在v6中,您应该将组件作为“元素”传递,例如像这样:
<Route path="/" element={<Dashboard/>}>
在这里插入图片描述

4.函数式组件接收props参数时定义数据接口?

在利用typescript编写react项目时,函数式组件需要定义返回值类型。传递的props参数的类型,就是使用interface泛型定义的

5.使用TypeScript开发react项目:

  1. 函数式组件写法有区别与js的,区别就是函数式组件需要写成箭头函数,传递props参数时需要指定类型,interface泛型。
  2. 什么时候使用RouteComponentProps(V6中不存在了)
    在这里插入图片描述
  3. 使用redux时需要做的处理

6.要使一个组件拥有路由组件的history、location、match等属性

  1. 需要使用withRouter将组件包裹起来(reactrouter6以下版本),还可以使用useHistory、useLocation、useParams、useRouteMatch(函数式组件中)
  2. reactRouter6需要使用hooks钩子,useXxxx,钩子只能在函数式组件中使用
    要在类式组件中使用的话,可以使用高阶组件,对类组件进行一个包裹,让原始类组件拥有useNavigate功能

7.书写代码规范上的一些问题

1. 函数式组件中元素调用方法时加不加括号,写不写this,什么时候用箭头函数
2.reducer中赋新值时的解构
3. 什么是高阶组件

8.使用redux和react-redux

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8.1使用react-redux

npm i react-redux,它并不原生支持typescript,需要再安装npm install @types/react-redux --save-dev
在这里插入图片描述
使用Provider实现了订阅

8.2类式组件中使用react-redux

就是笔记中那样,导入connect包裹连接UI组件和容器组件
HomePage组件

8.3函数式组件中使用react-redux(使用hooks函数)

使用钩子函数useSelector(解决组件和store的耦合问题),可以连接store中的数据。
使用钩子函数useDispatch()分发dispatch
使用完以上两个钩子函数后就可以直接连接起状态数据和action了,不需要再导入store
Header组件

8.4使用redux

类式组件和函数式组件都一样,在需要使用数据的地方,引入store,使用store.getStore()获取数据,使用store.dispatch()分发动作。分发action后需要订阅subscribe。
HomePage组件

8.5异步处理redux-thunk——可以在action中处理异步任务

8.6自定义中间件

在这里插入图片描述

8.7redux-tooltik

  1. 可以直接在reducer中修改state了,因为有immer插件。
  2. redux-tooltik官网
  3. 核心API:createSlice
  4. 以下是编写状态管理
    在这里插入图片描述
    在这里插入图片描述
    createSlice:action与reducer捆绑在一起了
    将detail从MVC修改到redux-tooltik
    以下是编写异步数据操作
    在这里插入图片描述
    第一种写法:
    在这里插入图片描述
    第二种写法:
export const getProductDetail = createAsyncThunk(
  "productDetail/getProductDetail",
  async (touristRouteId: string, thunkAPI) => {
    const { data } = await axios.get(
      `http://123.56.149.216:8080/api/touristRoutes/${touristRouteId}`
    );
    return data;   //返回的data中含有状态的标志(pending、fullfilled、rejected)
  }
);

export const productDetailSlice = createSlice({
  name: "productDetail",
  initialState,
  reducers: { 
  },
  extraReducers: {
    [getProductDetail.pending.type]: (state) => {
      // return { ...state, loading: true };
      state.loading = true;
    },
    [getProductDetail.fulfilled.type]: (state, action) => {
      state.data = action.payload;
      state.loading = false;
      state.error = null;
    },
    [getProductDetail.rejected.type]: (state, action: PayloadAction<string | null>) => {
      //   const ddd = action.payload;
      state.loading = false;
      state.error = action.payload;
    },
  }
});

RTK的创建store的API:configureStore:
在这里插入图片描述
在这里插入图片描述

9.I18n网站国际化

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这两个框架本身就都支持原生typescript,不需要再额外安装对typescript的类型声明文件。
本项目中的使用方法:

  1. 创建一个配置文件config.js
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import translation_en from "./en.json";
import translation_zh from "./zh.json";

const resources = {
    en: {
        translation: translation_en
    },
    zh: {
        translation: translation_zh
    }
};
i18n
    .use(initReactI18next) // 使用哪个框架
    .init({
        resources,   //两种语言的json文件
        lng: "zh",    //默认(初始化)的时候选择zh中文
        //keySeparator: false, // 注释掉之后我们可以使用对象的链式结构来访问字符串了
        //比如header.slogan
        interpolation: {
            escapeValue: false // react already safes from xss
        }
    });
export default i18n;
  1. 中文json资源:zh.js
{
    "header": {
        "slogan": "让旅行更便捷、幸福",
        "add_new_language": "添加新语言",
        "title": "React 旅游网",
        "register": "注册",
        "signin": "登陆",
        "home_page": "旅游首页",
        "weekend": "周末游",
        "group": "跟团游",
        "backpack": "自由行",
        "private": "私家团",
        "cruise": "邮轮",
        "hotel": "酒店+景点",
        "local": "当地玩乐",
        "theme": "主题游",
        "custom": "定制游",
        "study": "游学",
        "visa": "签证",
        "enterprise": "企业游",
        "high_end": "高端游",
        "outdoor": "爱玩户外",
        "insurance": "保险",
        "shoppingCart": "购物车",
        "signOut": "注销",
        "welcome": "欢迎回来 "
    },
    "footer": {
        "detail": "版权所有 @ React 旅游网"
    },
    "home_page": {
        "hot_recommended": "爆款推荐",
        "new_arrival": "新品上市",
        "domestic_travel": "国内游推荐",
        "joint_venture": "合作企业",
        "start_from": "(起)"
    }
}
  1. 英文资源:en.json
{
    "header": {
        "slogan": "Make travel happier",
        "add_new_language": "add new language",
        "title": "React Travel",
        "register":"Register",
        "signin":"Sign In",
        "home_page": "Home",
        "weekend": "Weekend",
        "group": "Group",
        "backpack": "Backpack",
        "private": "Private",
        "cruise": "Cruise",
        "hotel": "Hotel & Attractions",
        "local": "Local",
        "theme": "Theme",
        "custom": "Custom",
        "study": "Study",
        "visa":"Visa",
        "enterprise":"Enterprise",
        "high_end":"High-end",
        "outdoor":"Outdoor",
        "insurance":"Insurance",
        "shoppingCart": "Shopping Cart",
        "signOut": "Sign Out",
        "welcome": "Welcome back "
    },
    "footer": {
        "detail" : "All rights reserved @ ReactTravel.com"
    },
    "home_page": {
        "hot_recommended": "Hot Recommended",
        "new_arrival": "New arrival",
        "domestic_travel": "Domestic travel",
        "joint_venture": "Joint Venture",
        "start_from": "(start from)"
    }
}
  1. 在入口文件index.tsx中引入语言的配置文件即可使用
    在这里插入图片描述
  2. 使用i18n的 withTranslation,(注意w是小写的)完成语言配置的数据注入(使用的是高阶函数方式),完成注入之后,该组件的props中就会包含一个t函数,使用t函数需要类型定义,导入WithTranslation
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    以下是函数式组件中的使用,使用钩子函数:
    在这里插入图片描述
    以上配置好之后需要和redux联系起来,实现语言的全局切换:
    具体思想就是在reducer中修改数据的时候同时切换i18n中的语言配置。
    在这里插入图片描述

10.获得全局数据的两种方式?

10.1 在类组件中使用高阶函数

10.2在函数式组件中使用hooks

11.如何处理请求得到的html字符串为网页

要通过特定的API渲染
在这里插入图片描述

12.登录相关

12.1单点登录与JWT

JWT是干什么的
官网:jwt.io
全称为JSON Web Token,JWT的作用是用户授权,而不是用户的身份认证。
用户授权
用户授指当前用户有足够的权限访问特定的资源(错误状态码:403forbidden禁止访问)
用户认证
用户认证指的是使用用户名、密码来验证当前用户的身份(就是用户登录,错误状态码401Unauthorized未授权)
在这里插入图片描述
在这里插入图片描述

解码jwt
npm i jwt-decode
npm i jwt-decode @types/jwt-decode --save const token = jwtDecode(jwt);
登录持久化
npm install redux-persist
需要做的操作:
在这里插入图片描述
在这里插入图片描述

13报错

在这里插入图片描述

interface MyComponentProps extends RouteComponentProps {  
touristRouteId: string;
}
const MyComponent: React.FC<MyComponentProps> = ({ match, location, history, touristRouteId }) => {  
const [data, setData] = useState<any>(null); 
 useEffect(() => {    fetchData();  }, []); 
 const fetchData = async () => {   
  try {      
  const response = await fetch(`API_URL/${touristRouteId}`);     
   const data = await response.json();      
   setData(data);   
   } catch (error) {     
    console.error(error);   
     }  
     }; 
      if (!data) {    
      return <div>Loading...</div>; // 返回加载中的占位符 
       } 
        return (    // 返回 JSX 元素   
         <div>      <h1>{data.title}</h1>      // ...    
         </div>  
         );
         };
         export default MyComponent;

Argument of type ‘{ payload: undefined; type: “userSlice/logOut”; }’ is not assignable to parameter of type ‘LanguageActionTypes’. Type ‘{ payload: undefined; type: “userSlice/logOut”; }’ is not assignable to type ‘InterLanguageNew’. Types of prope

网络请求

axios

安装axiosnpm i axios 自带TS

对悬空数据做预处理!!!!!

先执行构造函数,productList为空,紧接着会渲染UI,这时候为空,而componnetDidMount会在组件完全挂载完后执行,所以报错。
处理方法一:在没有数据的时候显示加载中…

避免在useEffect中一直请求网络数据

在这里插入图片描述

App.tsx
Header.tsx(显示购物车中有几种)
DetailPage.tsx(添加到购物车的动作)

总结

在这里插入图片描述

  • 14
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值