React 18 仿携程项目【二十六】.tsx和.ts结尾的文件的区别

也要大步向前呀

已于 2023-06-17 17:30:56 修改

阅读量512

点赞数

文章标签：前端

于 2023-05-16 16:00:58 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/2301_76510083/article/details/130707652

版权

react项目中每个功能模块都有三大金刚，即index.ts和对应的.tsx和对应的 .moudle.css.

那么.tsx和.ts结尾的文件有什么区别呢？

需要写入jsx语法的文件以.tsx结尾！！！

jsx语法：可以理解成需要返回render函数，即return（<div></div>）的形式

不需要写入jsx语法的文件以.ts结尾！！！

也要大步向前呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 18 仿携程项目【二十六】.tsx和.ts结尾的文件的区别

.tsx和.ts结尾的文件的区别
复制链接

扫一扫

也要大步向前呀

博客等级

码龄1年

71
原创

54
点赞

27
收藏

114
粉丝

关注

私信

热门文章

分类专栏

最新评论

JavaScript 中 call()、apply()、bind() 的用法
CSDN-Ada助手: 推荐 MySQL入门技能树：https://edu.csdn.net/skill/mysql?utm_source=AI_act_mysql
React 18 仿携程项目【二十九】redux数据持久化插件~redux-persist
A郭恒: 我一刷新他就重置为初始值了
React 18 系统精讲（四）react event事件处理
CSDN-Ada助手: 恭喜您写出了第三篇博客，阐述了React 18中的事件处理，让我受益匪浅。希望您能够继续保持创作的热情，为我们带来更多的知识分享。接下来，建议您可以深入探讨React 18的新特性，例如懒加载、状态管理等方面，让我们更加全面地了解这个优秀的前端框架。期待您的下一篇作品，再次感谢您的分享。 CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3
React 18 系统精讲（四）react event事件处理
阿巴阿巴==: 那箭头函数要传值怎么办
React 18 系统精讲（五）获取网络api && 使用setState异步开发
CSDN-Ada助手: 数据” React 18 系统精讲（五）获取网络api数据在前面的博客中，我们已经了解了 React 18 中的一些新特性和常用的组件。但是，大多数应用都需要从服务器获取数据并将其渲染到页面上。本文将介绍如何在 React 18 中获取网络 API 数据。 1. 使用 fetch 获取数据 fetch 是一种在浏览器中发送 HTTP 请求的新方式，它可以替代旧的 XMLHttpRequest（XHR）对象。fetch 返回的是一个 Promise，我们可以使用 then() 方法来处理响应数据。下面是一个使用 fetch 获取数据的例子： ```javascript fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)) ``` 在这个例子中，我们向 https://jsonplaceholder.typicode.com/posts 发送了一个 GET 请求，并在获取响应后使用 then() 方法将其转换为 JSON 格式的数据。如果出现错误，我们将使用 catch() 方法处理它。 2. 使用 axios 获取数据 axios 是一个流行的 JavaScript 库，它可以在浏览器和 Node.js 中发送 HTTP 请求。与 fetch 不同，axios 通过向服务器发送请求来获取数据，并将响应数据作为 Promise 返回。下面是一个使用 axios 获取数据的例子： ```javascript import axios from 'axios' axios.get('https://jsonplaceholder.typicode.com/posts') .then(response => console.log(response.data)) .catch(error => console.error(error)) ``` 在这个例子中，我们使用 axios.get() 方法向 https://jsonplaceholder.typicode.com/posts 发送一个 GET 请求，并在获取响应后使用 then() 方法打印响应数据。如果出现错误，我们将使用 catch() 方法处理它。 3. 使用 async/await 获取数据 async/await 是 ES2017 新引入的语言特性，它使异步代码更易于阅读和编写。在 React 18 中，我们可以使用 async/await 来获取网络 API 数据。下面是一个使用 async/await 获取数据的例子： ```javascript async function fetchData() { try { const response = await fetch('https://jsonplaceholder.typicode.com/posts') const data = await response.json() console.log(data) } catch (error) { console.error(error) } } fetchData() ``` 在这个例子中，我们定义了一个名为 fetchData() 的异步函数，并使用 try/catch 语句处理可能出现的错误。在函数中，我们使用 await 关键字来等待 fetch() 和 response.json() 方法的完成，并将数据作为 Promise 返回。最后，我们在控制台中打印数据。总结在 React 18 中，获取网络 API 数据是很常见的任务。我们可以使用 fetch、axios 或 async/await 来获取数据，并根据需要处理响应或错误。无论你选择哪种方法，都需要小心处理 Promise 和错误，以确保你的应用程序能够正确地工作。 CSDN 会根据你创作的前四篇博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148 看奖励名单。

您愿意向朋友推荐“博客详情页”吗？

强烈不推荐
不推荐
一般般
推荐
强烈推荐

提交

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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