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. 【sqli-labs】 less26a GET- Blind based -All you SPACES and COMMENTS belong to us -String-single quotes-Parenthesis(GET型基于盲注的去除了空格和注释的单引号括号注入)

    这个和less26差不多,空格还是用%a0代替,26过了这个也就简单了 ;%00 可以代替注释,尝试一下 order by 3 http://192.168.136.128/sqli-labs-mas ...

  2. JSP状态管理_1_Cookie

    http协议的无状态性:当浏览器发送请求飞服务器时,服务器相应客户端请求:但当同一个浏览器再次发送请求给浏览器时,服务器并不知道它就是刚才那个客户端. 保存用户状态的两大机制:Session,Cook ...

  3. java操作Excel的poi 创建一个sheet页

    package com.java.poi; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.ss.us ...

  4. boost asio异步读写网络聊天程序客户端 实例详解

    boost官方文档中聊天程序实例讲解 数据包格式chat_message.hpp <pre name="code" class="cpp">< ...

  5. sqlserver 和MySQL的一些函数的区别

    相同的表数据在sqlserver和MySQL中使用各自的函数得到相同的结果,如下表 drop table tb;create table tb(id int, value1 varchar(10), ...

  6. 蒟蒻的长链剖分学习笔记(例题:HOTEL加强版、重建计划)

    长链剖分学习笔记 说到树的链剖,大多数人都会首先想到重链剖分.的确,目前重链剖分在OI中有更加多样化的应用,但它大多时候是替代不了长链剖分的. 重链剖分是把size最大的儿子当成重儿子,顾名思义长链剖 ...

  7. linux -- 扩容 /home 空间( xfs文件系统分区扩容指定挂载点)

    问题: /home空间容量不够使用,扩容卷组,扩容挂载点 方法: 1. 确认有可用的物理磁盘 fdisk -l -- 查看磁盘信息 df -h -- 查看当前挂载信息 vgs -- 查看当前卷组信息 ...

  8. open-ldap服务安装(1)

    LDAP简介 LDAP 代表 轻量级目录访问协议.在我的理解中ldap就是一个数据库. 在LDAP中,目录条目以分层树状结构排序. 传统上,这种结构反映了地理和组织边界,表示国家/地区的条目显示在树的 ...

  9. Git 基础教程 之 创建与合并分支

  10. Git 基础教程 之 删除文件

    ① 手动或命令 rm删除工作区的问价:       git checkout -- readme.txt 可恢复       checkout 实际上是用版本库里的替换工作区的版本 ② 删除了工作区文 ...