React中使用antd-mobile组件库中的跑马灯组件报错严格模式问题

最新推荐文章于 2022-01-20 15:18:46 发布
原创 最新推荐文章于 2022-01-20 15:18:46 发布 · 2.4k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#react #antd-mobile
本文解决在使用Create-React-App搭建的React项目中，Antd Mobile的Carousel组件出现的StrictMode警告问题。通过移除React.StrictMode标签，可以消除关于字符串ref的警告，不影响项目运行及组件效果。

通过ceact-react-app搭建的React项目，在使用antd-mobile组件库中的Carousel（跑马灯）组件时，报如下错误：
在这里插入图片描述
Warning: A string ref, “slider”, has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref

Warning: A string ref, “frame”, has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref

（该报错并不影响项目的运行以及跑马灯的效果）

根据报错信息的提示：一个字符串ref，“slider”，已经在一个严格的模式树中找到。说明在React中使用的是严格模式了。

然后自然就想到了 React中的严格模式(Strict Mode)。
在这里插入图片描述
根据以上信息，找到项目src目录中的index.js，删除掉该 <React.StrictMode>标签即可。如下图所示：
在这里插入图片描述
报错即可完美解决。 ؏؏☝ᖗ乛◡乛ᖘ☝؏؏

carousel_slider 踩坑里面没有起来
keny-大成的博客
01-05 2596
1 carousel_slider: ^2.3.1 2.代码为： import 'package:carousel_slider/carousel_controller.dart'; import 'package:carousel_slider/carousel_options.dart'; import 'package:carousel_slider/carousel_slider.dart'; import 'package:flutter/material.dart'; import .
react antd-mobile安装及按需加载
youlinaixu的博客
04-14 2272
1.对index.html进行移动端的配置 fastclick是解决移动端300ms延迟的方案 <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> if ('addEventListener' in d...
React项目中使用antd-mobile组件中的Carousel 走马灯报错严格模式问题
莹儿的博客
07-30 2807
通过ceact-react-app搭建的React项目，在使用antd-mobile组件库中的Carousel（跑马灯）组件时，报如下错误(但是不影响跑马灯的使用)： Warning: A string ref, "slider", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or
A string ref, “title“, has been found within a strict mode tree. String refs are a source of po
不确定因素的博客
01-20 1363
react严格模式报错:Warning: A string ref, "title", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here:
学习记录——react受控组件和非受控组件，操作dom（ React.createRef()）
sakura_zr的博客
09-08 386
受控组件和非受控组件 受控组件：主要应用于表单元素。受控值得是表单中的值，和状态绑定 有受控组件，也有非受控组件。非受控的意思是表单的值不与状态绑定 受控组件 通过受控方式取值，可以实时的去拿，就像vue里的v-model，可以动态获取值。前提是，input框里的值要绑定到state里去。 打开页面查看： 非受控 在react中，我们可以通过ref来获取dom元素 用法：在需要获取的dom元素标签中使用ref=’xxx’ 使用this.refs.xxx就可以获取到这个dom元素了 打开浏览器查看：如果
React中useRef()和createRef()的使用
weixin_45679977的博客
03-30 3086
useRef() import React, {useState, useRef, createRef, useEffect } from 'react'; const Test = ()=>{ const [ index, setIndex ] = useState(1); const createRefDiv = createRef(); const useRefDiv =...
react脚手架+antd-mobile移动端环境搭建
关中刀客在青岛
05-21 1538
配置步骤 环境 node: v12.16.1 npm: 6.14.4 "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1" 创建react应用 npx create-react-app my-app 然后可以用npm start直接启动项目。 安装antd-mobile $ npm install antd-mobile --save 按照如下内容更改入口页面 <!DOCTYPE ht
create-react-app引用antd-mobile问题总结
qq_38089996的博客
05-21 452
1. 使用create-react-app脚手架下载后, 安装antd-mobile, 按需加载, 启动报错 The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available- pluginst - https://github.com/arac
react之旅（五）react 事件对象；如何获取input框值；键盘事件；实现双向数据绑定
letianxf的博客
07-19 1825
一、事件对象 什么是事件对象： 在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息 实现下面的场景： 点击按钮的时候，将按钮的颜色变为蓝色。 import React from 'react'; class Demo1 extends React.Component { constructor(props){ super(props); } changeColor =(e) => { e.ta
dva+antd mobile搭建移动端的项目
青红造了个大白之成长记
05-09 4634
第一步：使用dva创建项目， 通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。 $ npm install dva-cli -g $ dva -v dva-cli version 0.9.1 dva new dva-quickstart cd dva-quickstart $ npm start 创建完后，项目的文件结构大概如下： 第二步：安装antd-mo...
什么是 useRef , useRef 与 createRef 区别, 以及在什么情况下使用 useRef
热门推荐
frontend_frank的博客
02-09 2万+
前言: 这篇文章会假设你已经对 react hook有一些基础的了解. 主要讨论什么是 useRef , useRef 与 createRef 的区别, 以及在什么情况下使用 use...
关于typescript + react +antd 的Function components cannot have string refs. We recommend using useRef()
SmallWite的博客
09-17 3344
关于typescript + react +antd 的Function components cannot have string refs. We recommend using useRef()问题 我这里是一个走马灯 想要调用 他的prev ,next 方法可是按照网上的说法用this.ref.(自己取的名字).prev();就会报出 Function components cannot have string refs. We recommend using useRef()这个问题。我百思不得其
React 属性, 函数式组件以及Hook
ZZZ___jh的博客
07-29 865
属性以及函数式组件,HookReact的五个属性PureComponentrefchildrendangerouslySetInnerHTMLkey的问题函数式组件React hooks什么是HookReact Hooks的优势常用HookHook的使用规则总结: 五个属性: PureComponent、ref、children、dangerouslySetInnerHTML、key React的五个属性 PureComponent 个人理解是PureComponent 是类组件的情况下,它是用来继承的
A string ref，“slider“，has been found within a strict mode tree.String refs are a source of potential
l1090865的博客
08-06 2848
问题描述 A string ref，“slider”，has been found within a strict mode tree.String refs are a source of potential bugs 解决方法
react中各类轮播swiper、走马灯Carousel使用（ant.design、antd-mobile、swiper整合文档）
刻痕
01-10 1万+
react的 轮播图（要么叫做：走马灯）方案：要么引用ui框架，要么引用插件，要么自己手写（不建议，要处理兼容，有坑）。 **本文目录：** **一：antd-mobile（V2）使用Carousel走马灯** **二：antd-mobile（V5）使用Swiper轮播** **三：ant design 使用Swiper轮播** **四：引用swiper插件** ## 一：antd-mobile（V2） 走马灯Carousel [点击查看官方案例](https://antd-mobile-v2.surg
A string ref, “slider“, has been found within a strict mode tree...报错
Suk__的博客
09-11 557
将index.js中的React.StrictMode标签去掉即可,这是React的严格模式导致的.
antd mobile的走马灯（Carousel）组件无法滑动的一个原因
可能青蛙的专栏
04-03 6212
最近在使用antd mobile+recat开发手机端的应用，本来准备使用走马灯（Carousel）组件来展示应用中的附件的，但发现这组件在手机的浏览器中，死活都无法用手指滑动，在pc端可以正常使用。 看网上有很多说法是滑动不流畅，但我遇到的是基本滑动不了，后来反复的测试，发现斜下方滑动是勉强可以成功，随即想到是不是手机浏览器的设置问题呢？，换一个浏览器一试，果然可以，回原来浏览器，发...
ante react 警告 index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an
weixin_44544388的博客
03-26 9931
create-react-app 版本：3.4.1 ante 版本：4.0.4 引用ante的示例组件一直报警告， index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Tabs which is inside StrictMode. Instead, a...
Flutter： There are multiple heroes that share the same tag within a subtree异常
正义
08-29 5363
今天写Demo的时候遇到了下面的错误： I/flutter: ══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter: The following assertion was thrown during a scheduler cal...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值