react拼接class&将JS标签转换为HTML
1、在JS中混杂字符和HTML标签,识别方法:
const menuList = ['门店', '星享俱乐部', '菜单', '<hr></hr>', '星巴克移动应用', '星礼卡', '星巴克臻选<sup>TM</sup>', '咖啡星讲堂', '上海烘培工坊', '关于星巴克', '帮助中心', '<hr></hr>'];
const listItems = menuList.map((item,index) =><li key={index} dangerouslySetInnerHTML={{ __html: item }}></li>);
// dangerouslySetInnerHTML:将JS中的标签转化为HTML语言,<hr>是分隔符,<sup>是上标
效果:
2、需要往标签里同时添加静态类和动态类:
let menuhide = this.state.menuSwitch ? '' : 'hide';
<a className={['moremenu', menuhide].join(' ')}>菜单</a>{/* react拼接class的方法 */}
在数组中的menuhide是个变量,用join()方法将两个数组元素拼接起来,以空格‘ ’作为分隔符
react拼接class&将JS标签转换为HTML的更多相关文章
- 在react中使用intro.js的的一些经验
react逐渐热了起来,但是新的东西毕竟前辈的经验少一些,前段时间自己在react中用到intro.js时,得到的资料甚少,摸索后便将一些心得记录下来了~ 1 intro.js的引入,这一点请看上一篇 ...
- [RN] React Native 下实现底部标签(支持滑动切换)
上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...
- 把html标签转换为实体 dhtmlspecialchars
把html标签转换为实体/*可以处理数组中的代码,他们的作用是可以把一个数组或字符串中的字符转化为html实体,可以防止页面的跨站问题,那么我们看到他的转换就是将'&','"','& ...
- js字符串转换为数字的三种方法。(转换函数)(强制类型转换)(利用js变量弱类型转换)
js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...
- React 基于antd+video.js实现m3u8格式视频播放及实时切换
文档连接地址(官网看起麻烦,看中文别人整理好的)https://blog.csdn.net/a0405221/article/details/80923090 React项目使用 安装依赖 npm ...
- vscode react自动补全html标签
第一步:点击上图左下角设置,找到Settings,搜索includeLanguages 第二步:如上图点击图中红色区域,settings.json 第三部:把代码加入,如上图红色选择区域. " ...
- js汉字转换为阿拉伯数字支持十到十九
js汉字转换为阿拉伯数字 直接贴函数 function cnnumtonum(chnStr){ var chnNumChar = { 零:,一:,二:,三:,四:,五:,六:,七:,八:,九: }; ...
- [RN] React Native 实现 多选标签
React Native 实现 多选标签 效果如下: 实现代码: import React, {Component} from 'react'; import {Button, StyleSheet, ...
- react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false
react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false
随机推荐
- 【sqli-labs】 less18 POST - Header Injection - Uagent field - Error based (基于错误的用户代理,头部POST注入)
这次username和password都进行了输入校验 但是ip和uagent没有校验 当我们用admin admin登陆成功后,就会一条插入语句 由于程序无条件的信任了浏览器的header信息,那么 ...
- Android进度条控件ProgressBar使用
ProgressBar有四种样式,圆形的(大,中,小)和直条形的(水平) 对应的style为 <LinearLayout xmlns:android="http://schemas.a ...
- ESP32 开发笔记(十二)LittlevGL 添加自定义字体和物理按键
LittlevGL 添加自定义字体获取字库 ttf 文件可以从一些网站上获取字库文件,比如请注意字体许可证 生成源文件使用 LittlevGL 提供的字库文件转换工具,将 ttf 字库文件转换为源文件 ...
- 记Python学习
上周学的Python,感觉有点忘了,现在回顾一下... 一.Python安装及测试:https://www.cnblogs.com/weven/p/7252917.html 例子: Python自带的 ...
- PAT_A1142#Maximal Clique
Source: PAT A1142 Maximal Clique (25 分) Description: A clique is a subset of vertices of an undirect ...
- 15.5.2 【Task实现细节】骨架方法的结构
尽管骨架方法中的代码非常简单,但它暗示了状态机的职责.代码清单15-11生成的骨架方 法如下所示: [DebuggerStepThrough] [AsyncStateMachine(typeof(De ...
- codeforces 427D Match & Catch(后缀数组,字符串)
题目 参考:http://blog.csdn.net/xiefubao/article/details/24934617 题意:给两个字符串,求一个最短的子串.使得这个子串在两个字符串中出现的次数都等 ...
- Java实验环境搭建
1.JDK的下载一.JDK的下载及安装 (1).网站网址搜索http://www.oracle.com/technetwork/java,进入浏览页(2)找到Trials and Download 点 ...
- 数组(day07)
数组名称不可以代表存储区 数组名称可以代表数组里第一个存储区的地址 可以对数组名称进行sizeof计算,结果是 数组里所有存储区的总大小 C99规范里可以使用变长数组 声明变长数组的时候可以用变量表示 ...
- Atcoder AGC031B Reversi (DP计数)
简单的计数题.(总算做出一道AGC的B题了,然而这场比赛我忘记打了233333) 题目链接: https://atcoder.jp/contests/agc031/tasks/agc031_b 题意: ...