在React中使用react-router-dom路由
使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。安装首先进入项目目录，使用npm安装react-router-dom：npm install react-router-dom --save-dev //这里可以使用cnpm代...
2024-01-10
react中如何使用iconfont
react中如何使用iconfont1, 新建项目 2, 搜索想要的图标，输入关键字查询即 3, 点击加入购物车。 4, 在购物车中点击下载至本地。 5, 保留.eot, .css, .svg, .woff, .ttf五个文件，其余均可删除。6, 将刚刚保留下来的.css文件后缀改为.js。7, 打开.js文件（iconfont.js）修改如下...
2024-01-10
react中constructor和super的使用
一：什么时候要用constructor，需要定义state的时候必须要写，要调用super()，而且要传入props参数即super(props)。如果不定义state的话，有无constructor没区别。二：什么时候要调用super，如果要在子类中使用父类的属性和方法，就要调用super(父类接受的参数)，即要在constructor中使用this.props的时候就必须要调用...
2024-01-10
react中的ref在input中的详解
当我们在项目中遇见文本输入框的时候，获取时刻输入框中的值1、受控组件class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; } render() { return ( <input type="text" value={this.state.value} onChange={this.handleChange} /> ...
2024-01-10
react hook：认识useEffect
据说，这个hook可以模拟class组件的三个生命周期前言官网已经介绍过，这里再啰嗦一次。useEffect是一个用来执行副作用hook，第一个参数传入一个函数，每一次render之后执行副作用和清除上一次副作用，该函数的返回值就是清除函数。第二个参数是一个数组，传入内部的执行副作用函数需要的依赖，...
2024-01-10
从React Native发布一个x-www-form-urlencoded请求
我有一些要以表单编码形式发布到服务器的参数：{ 'userName': 'test@gmail.com', 'password': 'Password!', 'grant_type': 'password'}我正在这样发送我的请求（当前没有参数）var obj = { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', },};fetch('...
2024-01-10react-router-dom：从内部获取props.location 零件
我有一个简单的应用程序，它BrowserRouter从“ react-router-dom”v4使用。我试图location.pathname从<BrowserRouter/>组件内部访问属性，但无济于事：class App extends Component{ render(){ return ( <BrowserRouter> // How do I access this.props.location? <div className={(this.prop...
2024-01-10react-router在子组件中获取this.props.location
据我所知，<Route path="/" component={App}/>将提供App与路由相关的道具，例如location和params。如果我的App组件有许多嵌套的子组件，那么我如何在不使用以下子项的情况下获取子组件：从App传递道具使用窗口对象为嵌套的子组件创建路线 我以为this.context.router会有一些与路线有关的信息，但this.context.router...
2024-01-10
react-native-vector-icons在TabNavigator使用示例
安装配置react-navigation https://reactnavigation.org/docs/en/getting-started.html 安装react-navigation 报错 EPERM: operation not permitted ? cmd进入根目录cd androidgradlew clean回到根目录 cd../重新操作下载或运行 安装配置react-native-vector-iconshttps://www.npmjs.com/package/react-native...
2024-01-10![[转] react-router4 + webpack Code Splitting](/wp-content/uploads/thumbs/534330_thumbnail.jpg)
[转] react-router4 + webpack Code Splitting
项目升级为react-router4后，就尝试着根据官方文档进行代码分割。https://reacttraining.com/react-router/web/guides/code-splitting在实际项目中，js,css文件默认通过webpack打包的话会很大，动不动就好几兆。在实际场景中，我们需要缩短首屏的时间展现时间，需要将 首屏没有 涉及到 其他页面的 业务和组件 进行代码...
2024-01-10
SpringBoot下WebSocket+React例子
1、Java端1.1、引入SpringBoot的WebSocket包，Maven配置：<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> <version>2.1.0.RELEASE</version></dependency>1.2、增加WebSocket配置类package com.tfe.sell.common.c...
2024-01-10React-router-dom-链接更改URL但不呈现
我是React的新手，我已经<Link>从dy数据中转到下一个或上一个项目（例如，如果我在user / 2视图上，则上一个链接转到user /1，下一个链接转到user / 3 ），则正确更改了url，但完全不呈现该组件，并且根本不重新加载数据。我读到这是由于组件未检测到子代未更改状态，所以父组件未呈现。我尝试使用，...
2024-01-10
Vue.config.productionTip = false
Vue.config.productionTip = false，阻止启动生产消息；没有Vue.config.productionTip = false这句代码，它会显示你生产模式的消息；开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这...
2024-01-10
react-next 引入阿里云iconfont 图标（适用所有）
进入 阿里云图标库搜索想要的图标地址：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2随便找一个 加入购物车添加到项目中test是我创建好的项目复制代码 到你项目的css中加入到自己的css中然后点击这个把这个圈起来的代码也复制过去就是这样的 注意我箭头指向的三个名称一定要一致一致...
2024-01-10
关于router.beforeEach 调用 axios 的问题
现在我有一个需求在所有页面，显示前需要做一个远程的授权验证我用router + axios 来做的，这个代码在执行的过程中:check() 第一次没有执行axios代码所有代码都走完，才会走axios的代码难到是执行顺序不吗？但我加了await 正常不是应该 check()一次性全走完的嘛不知道哪里写错了router/index.jsimport Router from 'vue-router'...
2024-02-07
解决Vue-Router升级导致的Uncaught (in promise)问题
在升级了Vue-Router版本到到3.1.0及以上之后，页面在跳转路由控制台会报Uncaught (in promise)的问题这是什么原因呢？看vue-router的版本更新日志V3.1.0版本里面新增功能：push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常解决方法一：在调用方法的时候用catch捕获异常this.$router.replace({ na...
2024-01-10
解决Vue-Router升级导致的Uncaught (in promise)问题
在升级了Vue-Router版本到到3.1.0及以上之后，页面在跳转路由控制台会报Uncaught (in promise)的问题这是什么原因呢？看vue-router的版本更新日志V3.1.0版本里面新增功能：push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常解决方法一：在调用方法的时候用catch捕获异常this.$router.replace({ na...
2024-01-10
vue.config.js 前端跨域设置和www-authenticate
vue 前端跨域设置https://cli.vuejs.org/zh/conf...跨域问题一直都是后端是设置，如果后端不设置，前端按照如下设置，并没有任何效果，网上都说是这样设置，为什么我的不能成功，请问有知道的吗？module.exports = { devServer: { proxy: { '/api': { target: '<url>', ...
2024-03-08
react-native使用createBottomTabNavigator创建tabbar
使用的是官方推荐的react-navigation导航库,里面有一个方法叫createBottomTabNavigator,用于创建底部tabbar,下面说一下流程1.首先安装:yarn add @react-navigation/native…要装挺多个包的,因为有可能版本更新,依赖关系改变,我就不给大家写出来了,在官网上边看吧2.在app.js中导入组件并使用3.创建好组件,并导入相关依...
2024-01-10
Vue-router+webpack单页项目服务器部署(nginx)
部署项目目录结构如下:1.首先修改config文件夹下的index.js 配置文件,将文件内的assetsPublicPath: '/'修改为 assetsPublicPath: './'2.在router文件夹下的index.js路由配置中加上:mode: 'history', // 路由模式,此处为history模式,需修改nginx配置文件base: '/', // 路由基目录3.命令行执行npm run build 生成布署文件,并将文件上...
2024-01-10
vue项目中企业微信使用js-sdk时config和agentconfig配置
1.如果只使用config配置的相关js接口 可采用如下方式引入执行 npm weixin-sdk-js --save 局部引入 在vue页面中 import wx from 'weixin-sdk-js'; 全局引入 在vue 的main.js 页面中 引入后编写到vue原型链上，然后全局调用 import wx from "weixin-sdk-js";Vue.prototype.$wx = wx;2.如果要使用agentConfig配置的相关接口 一定不要执行np...
2024-01-10
vue写footer导航，点击哪个让哪个变色并路由跳转（router-link-active的作用）。。
vue写footer导航，点击哪个让哪个变色并路由跳转（router-link-active的作用）。如上图所示，创建了4个路由跳转选项。当我切换“首页” “啦啦” “发现”“我的”四个路由选项时，文字和icon由黑色变成红色。下图为布局（html）：router-link: 其中tag='div’表示router-link为div标签CSS：router-link-active是vue自...
2024-01-10
【Docker】docker服务无法获取SpringCloud-config配置中心配置
情况是这样子的，我本地启动一切正常，服务也能拿到配置文件。而部署到docker上config服务启动顺利，通过浏览器访问也能看到目标配置（听说服务也是通过http获取配置文件的）但是服务A就是拿不到这个配置，报错占位符解析失败ps：我这里docker网络模式是默认的bridge，ip写的是宿主机的ip，而服...
2024-01-10
react中constructor( )和super( )的具体含义以及如何使用
react中这两个API出镜率超级高，但是一直不太懂这到底是干嘛的，有什么用；今天整理一下，方便自己查看同时方便大家。1.constructor( )-----super( )的基本含义constructor( )——构造方法 这是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果...
2024-01-10使用React内联样式设置backgroundImage
我正在尝试访问静态图像以backgroundImage在React 的内联属性中使用。不幸的是，我已经干了如何做到这一点。通常，我认为您只是这样做如下：import Background from '../images/background_image.png';var sectionStyle = { width: "100%", height: "400px", backgroundImage: "url(" + { Background } + ")"};class Section extend...
2024-01-10
