关于React导入.jsx或.tsx组件时，出现文件大小写命名报错问题

已于 2024-06-06 21:48:29 修改
阅读量198 收藏 2
点赞数 1
文章标签： react.js 前端 javascript react typescript
于 2024-06-06 21:46:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/user_12121/article/details/139510390
版权

一、出现的问题

在进行react组件化开发时，往往会对复用的组件（.jsx或.tsx文件）进行特定格式的命名，这里我一般采用大驼峰命名法。但在开发时，引入组件时，出现了文件不存在的报错，如图：

上图中，我明明都是采用大驼峰命名法，但是出现了大小写命名不同的问题

二、问题的来由

据说是windows文件系统的问题, dos文件系统的文件名是不区分大小写的, 而js又是按照unix系统去设计文件系统的，具体没作深入研究。

三、解决方案

方案1：来回切换命名，以上图的RouterBefore.tsx为例，先把RouterBefore.tsx文件命名改为Test.tsx（随便改个名称），Crtl + s保存后，又把Test.tsx改回RouterBefore.tsx，再Ctrl + s保存一下，搞定！

方案2：点击一下你的VSCode，按住快捷键Ctrl + Shift + P，输入reload，选择Reload Window，按下万能回车键，搞定！

一个切图仔
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
table.jsx:React表组件
07-17
表.jsx React表组件安装 $ npm install table.jsx用法 var React = require ( 'react' ) ;var Table = require ( 'table.jsx' ) ;class App extends React . Component { render ( ) { var head = [ 'Left' , '...
react.js、react-dom.js、babel.js文件包下载
02-22
React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前，让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...
关于react组件名称大小写问题
冷月心的博客
01-15 3213
关于react组件名称大小写问题
React 使用JSX或者TSX渲染页面
Python私教
05-29 1430
在本节中，我们将实现必需的“Hello, World”JSX应用程序。在这一点上，我们只是把脚趾伸进水里;后面会有更深入的例子。我们还将讨论是什么使这种语法能够很好地用于声明性UI结构。
第三章 React之JSX、TSX语法
Etc.End的博客
11-30 2735
TSX语法在保留了HTML的标记语言的同时，增加了类型注解和JSX语法的特点，并通过构建工具将它们结合在一起，为构建大型、复杂的Web应用提供了更高效、更灵活的编程方式。在下一篇文章中我将讲解typescript的使用。我是Etc.End。
React18入门（第一篇）——JSX、TSX语法详解
做笔记/记录遇到的前端bug
10-03 3123
React18入门之JSX语法详解，TSX语法详解
React基础第一天-jsx
qq_46343149的博客
05-28 605
React 基础 整体介绍 内容介绍 React 概述 JSX React 组件基础 React 介绍 目标 了解react的基本概念， 是什么 React 官网 React 中文网 React 官网新版尝鲜 React 是用于构建用户界面的 JavaScript 库 构建用户界面. User Interface，对咱们前端来说，简单理解为：HTML 页面 javscrtipt库。不是框架，是库。 vue: 是渐进式的javascript框架 react 全家桶是框架 react
大前端-React05：关于JSX小练习遍历数组&&map函数和箭头
weixin_44242433的博客
10-23 453
主要看3，箭头函数那一块01-完整代码：02-代码解释：03-代码段解释：map+箭头函数（1）首选调用了，myId中map方法（2）map方法里面有啥？（3）结果-解惑 01-完整代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSX练习</title> </style> </head> <body> &
React TS JSX项目自动化配置，打包build报错问题解决
weixin_43837305的博客
01-14 2017
文章目录前言一、项目打包二、Jenkins自动化部署1.配置编译打包命令2.参考文献3.最终解决总结 前言 提示：本页面解决方法慎重参考，本人是在自己公司的项目发现的build问题，不代表所有项目都有这个问题，请明确后再参考 提示：以下是本篇文章正文内容，下面案例可供参考 一、项目打包 基本的md配置，本项目使用的是yarn管理工具。 本地安装依赖正常，打包正常 二、Jenkins自动化部署 1.配置编译打包命令 正常按照本地打包命令执行:yarn、yarn build:dev dev是自己配置的
【前端第十一课】React 基础；JSX 语法
Ws_zqw的博客
12-28 1326
React 基础 JSX 语法
leslie1943#blog#React-JSX和React.createElement1
07-25
React.createElement的语法糖JSX 语法是如何在 JavaScript 中生效的JSX 会被编译为 React.createElement()
skit-react:通过自动预处理.jsx文件将小品与React结合使用的示例
05-05
一个通过对.jsx文件进行预处理并以透明方式处理React组件在服务器端的预渲染的对React使用skit的示例。 怎么跑 main.js为React定义了一个自定义的.jsx资源加载器，因此您需要像这样运行main.js ： git clone ...
react下载,包括react.development.js;babel.min.js;react-dom.development.js
11-20
在这个压缩包中，包含的三个关键文件——`react.development.js`, `babel.min.js`, 和 `react-dom.development.js`，都是React生态系统中的重要组成部分。 1. **react.development.js**: 这是React库的开发版本。在...
react 的条件渲染
weixin_72324200的博客
07-10 248
可以在 JSX 中使用普通的 JavaScript `if`/`else` 语句来进行条件渲染。在 React 中，还可以使用逻辑 `&&` 运算符进行简单的条件渲染。另一种常见的方式是使用 JavaScript 中的三元运算符来进行条件渲染。有时需要更复杂的条件逻辑，可以使用条件运算符 (`?##### 使用 if/else 语句。##### 使用三元运算符。##### 使用条件运算符。使用逻辑 && 运算符。
FullCalendar的使用，react日历组件
前端小菜鸟也有人起的博客
07-09 397
FullCalendar的使用，react日历组件
react的解构赋值
最新发布
左直拳的马桶_日用桶
07-13 96
我的感觉，react开发效率不高。这当然应该是我还不熟悉react的缘故。但是，在阅读react代码过程中，其中一个容易困惑的地方是它到处充斥着的解构赋值。当然了，解构赋值并不是React特有的功能，而是ES6（ECMAScript 2015）引入到JavaScript中的语言特性。但是，这难道不是json对象的定义模式吗，怎么在这里变成了赋值，并且是将左边的东西赋给右边的？只能说这种赋值，忽左忽右，神鬼莫测。简则简矣，可读则未必。据说解构赋值简化了语言，使得代码更具可读性云云。哦，这是解构赋值，相当于。
react启用mobx @decorators装饰器语法
阑珊伊人
07-10 420
react如果没有经过配置，直接使用decorators装饰器语法会报错：因为react默认是不支持装饰器语法，需要做一些配置来启用装饰器语法。
react中 在tsx规范中组件使用 React.forwardRef后，在使用组件时获取ref为null。给出解决方案
06-02
当使用 `React.forwardRef` 包装组件时，可以通过 `React.forwardRef` 函数的第二个参数来获取传递给组件的 `ref`。在组件中，需要使用 `React.useImperativeHandle` 函数来定义可暴露给父组件的属性和方法。这些属性和方法将绑定到传递给组件的 `ref` 上。 例如，假设我们有一个 `MyComponent` 组件，它使用了 `React.forwardRef`，我们想要将传递给 `MyComponent` 的 `ref` 绑定到 `input` 元素上，可以这样实现： ```tsx import React from 'react'; interface MyComponentProps { // ... } interface MyComponentRef { // ... } const MyComponent = React.forwardRef<MyComponentRef, MyComponentProps>((props, ref) => { const inputRef = React.useRef<HTMLInputElement>(null); React.useImperativeHandle(ref, () => ({ focus() { inputRef.current?.focus(); }, // ... })); return ( <div> <input ref={inputRef} /> {/* ... */} </div> ); }); export default MyComponent; ``` 在这个例子中，`MyComponent` 组件包装了一个 `input` 元素，并使用 `useRef` 创建了一个 `inputRef` 对象，将其绑定到 `input` 元素上。使用 `useImperativeHandle`，将 `focus` 方法绑定到传递给组件的 `ref` 上。这样，外部就可以通过 `ref` 来调用 `focus` 方法。 使用组件时，需要使用 `React.createRef` 来创建一个 `ref` 对象，将其传递给 `MyComponent` 组件的 `ref` 属性。这样，`ref` 就可以正确地绑定到 `input` 元素上了。 ```tsx import React from 'react'; import MyComponent from './MyComponent'; function App() { const myComponentRef = React.createRef<MyComponentRef>(); function handleClick() { myComponentRef.current?.focus(); } return ( <div> <MyComponent ref={myComponentRef} /> <button onClick={handleClick}>Focus Input</button> </div> ); } export default App; ``` 这样就能正确地获取 `ref` 了，同时可以通过 `ref` 调用 `focus` 方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值