JSX中参数输出HTML

最新推荐文章于 2024-07-24 12:57:03 发布
最新推荐文章于 2024-07-24 12:57:03 发布
阅读量3.5k 收藏 2
点赞数
分类专栏： 前端 文章标签： jsx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joyce_lcy/article/details/77884314
版权
本文介绍了在JSX中如何将参数输出为HTML而不是字符串，详细讲解了dangerouslySetInnerHTML属性的使用，以及如何处理可能的安全风险，同时提到了自定义HTML属性的方法。
摘要由CSDN通过智能技术生成

JSX传递参数时，如何将参数输出为html而非字符串。

1. 前言

JSX特殊的非 DOM 属性

dangerouslySetInnerHTML：提供插入纯 HTML 字符串的功能，主要为了能和生成 DOM 字符串的库整合。

2. 实践示例

（1）需求说明

这里写图片描述

这里写图片描述

如上图，需要创建一个component，满足不同情况下文字可能换行或者有链接地址等。

（2）初始代码

//- 引用
import FormCheckbox from '../../components/fo
最低0.47元/天 解锁文章
Joyce的前端日常
关注
专栏目录
怎么使用jsx语法后写html标签快速形成
m0_60622481的博客
10-05 330
怎么使用jsx语法后写html标签快速形成
vhtml:将 JSXHyperscript 渲染为 HTML 字符串，无需 VDOM :rainbow:
07-24
网页版 将 JSX/Hyperscript 渲染为 HTML 字符串，无需 VDOM 需要使用 HTML 字符串（angular？）但想使用 JSX？ vhtml 支持你。 构建组件？ 帮自己一个忙并使用 安装 通过 npm： npm install --save vhtml 用法 // import the library: import h from 'vhtml' ; // tell babel to transpile JSX to h() calls: /** @jsx h */ // now render JSX to an HTML string! let items = [ 'one' , 'two' , 'three' ] ; document . body . innerHTML = ( < div xss=removed> < h1> Hi
JSX（在JS代码中编写HTML模版结构）的概念
最新发布
听海边涛声
07-24 295
JSX（在JS代码中编写HTML模版结构）的概念
让JSX支持内容输出html标签
qq_32915337的博客
01-05 598
var html="<span style='color:#FF0000'>jack&nbsp;lee</span>"; <div dangerouslySetInnerHTML={{__html:html}}></div>
jsx转为html,reactjs-jsx中的自动完成html标签（崇高文本）
weixin_29688535的博客
05-30 418
reactjs-jsx中的自动完成html标签(崇高文本)我希望能够对我的react / jsx代码中的html标签使用自动完成功能。 处理html文件的方法相同。 我可以配置sublime text 3来启用jsx文件的标签自动完成功能吗？7个解决方案74 votes值得注意的是，您可以通过复制并稍微修改meta.jsx.js随附的meta.jsx.js的键绑定来在JSX中更紧密地启用Subli...
vue使用jsx绑定时间，元素，html字段
奔跑的面条博客
02-28 834
来自 https://juejin.im/post/5e409f02e51d4526f16e3bce 要监听 JSX 中的事件，我们需要“on”前缀。 例如，将onClick用于单击事件。 render (createElement) { return ( <button onClick={this.handleClick}></button&g...
JSX，Html语法需注意的部分
z69183787的专栏
03-15 2476
在JSX中设置style属性与其它的属性不同，  在JSX中我们通常是通过 {} 的方式插入值，但是设置style属性需要{{ }} ,否则系统会报错。 import classes form './myCss.css' {/*JSX 中的注释方式*/} {/*style属性必须使用 {{}} */} div style={{width: 20px; height=30px}}>
jsx怎么往js里传参数_JSX语法使用详解——终极版
weixin_39525243的博客
12-19 1785
一、基础1、JSX是什么JSX是一种像下面这样的语法：const element = Hello, world!;它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。本质上，JSX为我们提供了创建React元素方法(React.createElement(component, props, ...children))的语法糖(syntactic sugar)。上面的代码实质...
React的基本使用-JSX、创建视图、插值、条件输出、列表循环、属性表达式
此鱼非闲鱼也的博客
06-29 784
React基本使用 React是用于构建用户界面的 JavaScript 库。 React的特点： 以声明式编写 UI，可以让你的代码更加可靠，并且更方便调试。 组件逻辑使用 JavaScript 编写而不是模版，可以轻松地在应用中传递数据，而且使状态与 DOM 分离。 还可以使用 Node 进行服务器渲染，或者使用 React Native 开发原生移动应用。 ReactDOM ReactDOM 提供了与浏览器交互的 DOM 功能， 比如：dom 渲染 ReactDOM.render(element,
jsx-maven-plugin:JSX 变压器 maven 插件
06-07
在 Maven 的 `pom.xml` 文件中添加 jsx-maven-plugin 的配置，包括插件的坐标、执行目标和任何特定的配置参数。例如： ```xml ... <groupId>com.somecompany</groupId> <artifactId>jsx-maven-plugin ...
React学习(一) JSX及元素渲染
weixin_43616019的博客
07-16 550
react学习笔记 JSX及元素渲染
前端学习（2278）jsx进阶使用3之数组遍历
歌谣的博客
09-26 241
index3.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &
html转换jsx工具,GitHub - developit/vhtml: Render JSX/Hyperscript to HTML strings, without VDOM
weixin_30537231的博客
05-31 155
vhtmlRender JSX/Hyperscript to HTML strings, without VDOMNeed to use HTML strings (angular?) but want to use JSX? vhtml's got your back.Building components? do yourself a favor and use InstallationVia...
防止jsx中HTML文本被转译
weixin_49314618的博客
03-03 213
问题： <Content>{content}</Content> 如果此时 content 不是纯文本，而是 HTML 文本。例如： 我们获取到的 content 是：<h1>今天又学会了一个知识点<h1> 解决方案：使用 dangerouslySetInnerHTML <Content dangerouslySetInnerHTML={{content}}/> ...
jsx中的 v-html 、 v-text
lewxiaolu的博客
01-05 4025
v-html: 在模板代码中，我们用v-html指令来更新元素的innerHTML内容，而在JSX里面，如果要操纵组件的innerHTML,就需要用到domProps export default { data() { return { content: '<div>你好</div>' } }, render() { // v-html 指令在JSX的写法是 domPropsInnerHTML return <div domPropsI
jsx插入html
总结，交流，记录，成长
01-10 3517
jsx插入html var thisIsMyCopy = 'copy copy copy strong copy'; 最佳解决方案 您可以使用dangerouslySetInnerHTML，例如 render: function() { return ( div className="content" dangerouslySetInnerHTML={{__ht
jsx转为html,实战json、html、jsx的互转
weixin_32404293的博客
05-30 947
jsx2html场景将下面的jsx转换为htmlconst items = ['one', 'two', 'three'];const SearchData = ({ data = [] }) => {let list = null;if (data.length) {list = data.map((l, k) => (<p key={k}>{l}p>));} el...
react将字符串转义成html语句
热门推荐
小楼一夜听春雨
05-10 2万+
在使用reactjs库的时候，会遇到将一段html的字符串，然后要将它插入页面中以html的形式展现，然而直接插入的话页面显示的就是这段字符串，而不会进行转义，可以用一下方法插入，便可以html的形式展现：<div dangerouslySetInnerHTML={{__html: "<p>爱死费崇政</p>"}} />
如何在HTML中嵌入jsx
10-06
在HTML中嵌入JSX可以通过使用Babel转换器来实现。Babel可以将JSX代码转换为普通的JavaScript代码，然后可以将该代码嵌入到HTML中的script标签中。以下是在HTML中嵌入JSX的步骤： 1. 首先，在HTML文件中添加一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值