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
随机推荐
- 浅谈Overload和Override的区别
如果在子类中定义某方法与其父类有相同的名称和参数,我们说该方法被重写 (Overriding).如果在一个类中定义了多个同名的方法,它们或有不同的参数个数或有不同的参数类型,则称为方法的重载(Over ...
- 怎么从传统的盒子思想转为Flex 布局(css)
前端进化很快,总是有新的技术出来,开始可能有些人用惯了盒子模型的思想 依赖 display属性 + position属性 + float属性.这三大件.它对于那些特殊布局非常不方便 我们就来看看Fle ...
- Jenkins构建项目
创建项目 Jenkins版本:Jenkins ver.2.150.1 在Jenkins首页点击‘New 任务’进入创建任务页面,在‘Enter an item name’输入框内输入项目名称,选择Je ...
- shell 结合expect实现ssh登录并执行命令
#!/bin/bash ips=( '127.0.0.1' ) ;i<${#ips[*]};i++)) do expect <<EOF #这里的 expect <<EOF ...
- 复习MySQL⑤查询、常用函数
查询操作符列表 distinct操作符:用来消除重复记录. - 例: 查询fruits表中所有不重复的s_id select distinct s_id from fruits; 子查询:写在()中, ...
- PAT_A1021#Deepest Root
Source: PAT A1021 Deepest Root (25 分) Description: A graph which is connected and acyclic can be con ...
- Linux基础:find命令总结
本文只总结一些常用的用法,更详细的说明见man find和 info find. find命令 find命令常用来查找文件或目录,可以根据给定的路径和表达式查找所需的文件或目录.该工具是由findut ...
- PHP和zookeeper结合实践
Zookeeper 简单介绍 Apache Zookeeper是开发和维护开源服务器的服务,它能够实现高度可靠的分布式协调. 安装Zookeeper(无需安装) wget http://mirror. ...
- 批量重命名B站下载文件
将B站下载的文件统一修改文件名 事情来由 事情是这样的,我在B站上发现一个教程,看了一下,非常不错,于是想下载下来(免得B站和谐). 问题就是这样来了,我手机没多少内存,下载后下发现文件在手机中都是以 ...
- BZOJ 3930 Luogu P3172 选数 (莫比乌斯反演)
手动博客搬家:本文发表于20180310 11:46:11, 原地址https://blog.csdn.net/suncongbo/article/details/79506484 题目链接: (Lu ...