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. (转)基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理

    http://www.cnblogs.com/wuhuacong/p/4777720.html 在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能 ...

  2. JSP状态管理_1_Cookie

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

  3. 个人作业—Alpha测试

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/homework/3338 这个作业要求在哪里 htt ...

  4. gitlab变更邮箱后发送邮件报SSLError错误

    测试发送邮件: gitlab-rails console Notify.test_email('test666@example.com', 'Message Subject', 'Message Bo ...

  5. Java JPA通过hql语句查询数据

    import javax.persistence.PersistenceContext; import javax.persistence.Query; public class StudentSer ...

  6. PAT_A1120#Friend Numbers

    Source: PAT A1120 Friend Numbers (20 分) Description: Two integers are called "friend numbers&qu ...

  7. TensorFlow技术解析与实战学习笔记(15)-----MNIST识别(LSTM)

    一.任务:采用基本的LSTM识别MNIST图片,将其分类成10个数字. 为了使用RNN来分类图片,将每张图片的行看成一个像素序列,因为MNIST图片的大小是28*28像素,所以我们把每一个图像样本看成 ...

  8. 设计模式 第一天 UML图,设计模式原则:开闭原则、依赖倒转原则、接口隔离原则、合成复用原则、迪米特法则,简单工厂模式

    1 课程大纲 2 UML的概述 总结: UML unified model language 统一建模语言 一共有十种图: 类图 用例图 时序图 * 对象图 包图 组件图 部署图 协作图 状态图 (最 ...

  9. C#第十三节课

    冒泡排序 using System;using System.Collections.Generic;using System.Linq;using System.Text;using System. ...

  10. python项目开发:ftp server开发

    程序要求: 1.用户加密认证 (对用户名密码进行MD5验证)2.允许同时多用户登陆 (使用socket server方法,为每个用户都创建一个信息文件)3.每个用户有自己的家目录,且只能访问自己的家目 ...