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. js DOM 节点树 设置 style 样式属性

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. XML文件读取加上 Ajax请求

    #region XML文件处理 XmlDocument doc = new XmlDocument(); XmlReaderSettings settings = new XmlReaderSetti ...

  3. javascrip this指向问题深入理解

    在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 1. 一般用处 对 ...

  4. [USACO10DEC]宝箱Treasure Chest

    区间DP,但是卡空间. n2的就是f[i,j]=sum[i,j]-min(f[i+1][j],f[i][j-1])表示这个区间和减去对手取走的最多的. 但是空间是64MB,就很难受 发现一定是由大区间 ...

  5. Intro.js 分步向导插件使用方法

    简介 为您的网站和项目提供一步一步的.更好的介绍 Intro.js 目前兼容 Firefox.Chrome 和 IE8,不兼容 IE6 和 IE7,后续版本将会提供更好的兼容. 在线演示及下载 在线演 ...

  6. vue中访问数据接口的配置

    业务API接口地址: http://localhost:3816/api/ 前端UI浏览地址:http://127.0.0.1:8080/#/home 由于同源策略的问题: 需要配置代理: 在开发环境 ...

  7. 微信小程序获取登录手机号

    小程序获取登录用户手机号. 因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button> 组件的点击来触发. 首先,放置一个 button 按钮,将 ...

  8. qt的关闭窗口

    .关闭主窗口并退出程序是 QApplication::exit() .如果是QDialog,就accept() 或 reject()在调用窗口中获取相关参数:void MainWindow::on_p ...

  9. POJ 3762 The Bonus Salary!

    The Bonus Salary! Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on PKU. Origi ...

  10. MySQL日志格式 binlog_format

    MySQL 5.5 中对于二进制日志 (binlog) 有 3 种不同的格式可选:Mixed,Statement,Row,默认格式是 Statement.总结一下这三种格式日志的优缺点. MySQL ...