react学习记录问题记录(一)
创始人
2025-05-31 09:15:50

1.路由(需要注意不同版本的写法存在差异,这里使用的是版本5)

安装第三方路由插件
npm i react-router-dom
相关内容介绍
BrowserRouter 路由容器组件
Route 渲染路由匹配的视图(类似于vue中的router-view)
link 进行路由跳转的入口(类似于vue中的router-link)

实例如下:

import { Component } from "react";
import {BrowserRouter as Router, Route} from 'react-router-dom'
import Login from '../views/login/index.js'
import Home from '../views/home/index.js'
class MainPage extends Component{render() {return(Login}/>Home}/>)}
}
export default MainPage

2.react-create-app中的全局scss变量的配置

在webpack.config.js中配置sass全局变量
安装npm install sass-resources-loader --save-dev


const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;{test: sassRegex,exclude: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'icss',},},'sass-loader').concat({loader: 'sass-resources-loader',options: {resources: [// 这里按照你的文件路径填写path.resolve(__dirname, '../src/assets/index.scss')]}}),sideEffects: true,},// Adds support for CSS Modules, but using SASS// using the extension .module.scss or .module.sass{test: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'local',getLocalIdent: getCSSModuleLocalIdent,},},'sass-loader').concat({loader: 'sass-resources-loader',options: {resources: [// 这里按照你的文件路径填写path.resolve(__dirname, '../src/assets/index.scss')]}})
}

3.报错问题记录如下:

关于绑定事件传参数

错误案例 onClick={this.fn(‘xxx’)}
写成上述这个样子fn方法就直接执行了我们需要的是点击的时候执行并且传递对应的参数
解决方案一: onClick= {()=>{this.fn(‘xxx’)}}
解决方案二:onClick={this.fn.bind(this,‘xxx’)}

react中 如何将带标签的字符串展示
{__html:'

nnnnn

'}}>

相关内容

热门资讯

中外对话丨中外专家警告:日本主...   中新网北京12月15日电 题:中外专家警告:日本主动调整军事战略,或走向穷兵黩武  作者 管娜 ...
夏某某(男,大专学历)隐瞒精神... 转自:扬子晚报2024年参军入伍后在安徽出现精神类障碍被退回,2025年隐瞒病史后入伍再被退兵……1...
告别纸上谈兵!AI 培训找哪个...   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! (来源:雷达财经)“...
一图读懂vivo S50:田曦...   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! (来源:快科技)快科...
监管部门出手整治不正当价格行为... 近日,国家市场监督管理总局研究起草了《汽车行业价格行为合规指南(征求意见稿)》(下称《指南》),并向...