react学习记录问题记录（一）

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(
            <Router>
                
                  <Route path="/login" component={Login}/>
                  <Route path="/home" component={Home}/>
 
            </Router>
        )
    }
}
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中 如何将带标签的字符串展示

<div dangerouslySetInnerHTML =  {{__html:'<h1>nnnnn</h1>'}}></div>