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的更多相关文章

  1. 在react中使用intro.js的的一些经验

    react逐渐热了起来,但是新的东西毕竟前辈的经验少一些,前段时间自己在react中用到intro.js时,得到的资料甚少,摸索后便将一些心得记录下来了~ 1 intro.js的引入,这一点请看上一篇 ...

  2. [RN] React Native 下实现底部标签(支持滑动切换)

    上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...

  3. 把html标签转换为实体 dhtmlspecialchars

    把html标签转换为实体/*可以处理数组中的代码,他们的作用是可以把一个数组或字符串中的字符转化为html实体,可以防止页面的跨站问题,那么我们看到他的转换就是将'&','"','& ...

  4. js字符串转换为数字的三种方法。(转换函数)(强制类型转换)(利用js变量弱类型转换)

    js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...

  5. React 基于antd+video.js实现m3u8格式视频播放及实时切换

    文档连接地址(官网看起麻烦,看中文别人整理好的)https://blog.csdn.net/a0405221/article/details/80923090 React项目使用  安装依赖 npm ...

  6. vscode react自动补全html标签

    第一步:点击上图左下角设置,找到Settings,搜索includeLanguages 第二步:如上图点击图中红色区域,settings.json 第三部:把代码加入,如上图红色选择区域. " ...

  7. js汉字转换为阿拉伯数字支持十到十九

    js汉字转换为阿拉伯数字  直接贴函数 function cnnumtonum(chnStr){ var chnNumChar = { 零:,一:,二:,三:,四:,五:,六:,七:,八:,九: }; ...

  8. [RN] React Native 实现 多选标签

    React Native 实现 多选标签 效果如下: 实现代码: import React, {Component} from 'react'; import {Button, StyleSheet, ...

  9. react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false

    react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false

随机推荐

  1. C# 遍历文本框

    #region 文本框指定位置加入回车符 private void button1_Click(object sender, EventArgs e) { #region // 查询首字母位置 //s ...

  2. PyCharm与GitHub环境配置

    转载地址:https://blog.csdn.net/xierhacker/article/details/70053162 一.准备工作 Ⅰ.git下载和安装 要连接GitHub,首先git是必不可 ...

  3. Java中面向对象三大特性之——继承

    继承的概述 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承那一个类即可. 现实生活中继承:子承父业,用来描述事物之间的关系 代码中继承:就是用 ...

  4. Lua循环结构while循环、repeat 循环、for循环_学习笔记03

    Lua循环结构while循环.repeat 循环.for循环 while语法结构 while 循环条件 do 循环体  end --1.输出1到100 index = do print(index) ...

  5. Mark Zuckberg: A letter to our daughter

    转自:   http://www.fastcompany.com/3054120/fast-feed/read-mark-zuckerbergs-letter-to-his-newborn-daugh ...

  6. js数组对象去重

    转: https://www.cnblogs.com/gaoht/p/9850449.html 在数组对象中去掉重复的对象: export function deteleObject(obj) { v ...

  7. 洛谷P1057 传球游戏【递归+搜索】

    上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:nn个同学站成一个圆圈,其中的一个同学手里拿着一个球,当老师吹哨子时开始传球,每个同学可以把 ...

  8. 搭建rsync服务(端口号873)

    rsync详细参数 1.-v,--verbose 详细模式输出,传输是的进度信息 2.-z,--compress 传输是进行压缩以提高传输效率,--comperess -level = NUM可以按级 ...

  9. 08.Web服务器-2.HTTP协议介绍

    HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web Consortium)和Internet工作小组IETF ...

  10. 15.Hibernate一对多双向关联映射+分页

    1.创建如下数据库脚本 --创建用户信息表 --编号,用户名,密码,年龄,性别,昵称,手机,地址,管理员,图像地址 create table users ( id ) primary key, use ...