error: props.dangerouslySetInnerHTML` must be in the form

最新推荐文章于 2022-10-23 15:12:43 发布
最新推荐文章于 2022-10-23 15:12:43 发布
阅读量831 收藏 1
点赞数
分类专栏： react 文章标签： react
原文链接：https://blog.csdn.net/m0_37452696/article/details/100017036
版权

在react开发的过程中有时我们需要展示一段富文本，react不能够直接解析富文本，需要他的一个属性dangerouslySetInnerHTML

<div dangerouslySetInnerHTML = {{_html:"<div>这里放的是html字符串</div>"}} />

在这里插入图片描述
原因是我们使用的格式不对。

这里比较坑的是_html是两个下划线。
<div dangerouslySetInnerHTML = {{ __html:"<div>这里放的是html字符串</div>" }} />

小新大人y
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React中组件的props.children
01-20
props.children是用于将从父组件传递过来的标签放置到子组件中 1.创建父组件 首先引入react和reactdom import React from 'react' import ReactDOM from 'react-dom' 创建父组件 class ParentDom extends React.Component{ constructor(){ super() this.state={ } } render(){ return ( 这是在父组件添加的标签 )
osh-route:openscihub.org
06-30
路线 路由基本上是属性和 URI 之间的转换器。 它的两个最重要的功能是互补的： route.uri(props)和route.props(uri) 。 这允许您将 URI 视为 POJO，这就是您在脚本中使用的内容。 安装 npm install osh-route 用法 例子： var Route = require ( 'osh-route' ) ; var userRoute = new Route ( { path : '/users/<user>' , params : { user : / ^ [ a-z ] + $ / } } ) ; path格式保持简单； 除了< >之间的参数名称外，字符串中的所有内容都是文字。 参数名称应与params对象中的条目匹配，该条目将参数名称映射到 RegExp。 RegExp 具有以下限制/允许： 可能以^开头
react-provider:React.js CustomTag 挂载方法
06-03
React提供者 用 React.js 组件替换 HTML 上的元素。 已经确认可以在Browserify + Babelify的环境下工作。 它也可以通过使用松散模式在 IE8 中工作。 主功能 组件提供者 this.props.children 数据道具 1.组件提供者 var elementMap = { selector : < Component> , selector2 : < Component> . . . } provider ( elementMap , wrapTagName = null ) ; 组件被扩展到由选择器（字符串）指定的元素。指定的属性将被继承到道具。 IE8 不支持 undefined 标签，所以请将 div 或 span 传递给 wrapTagName 以支持它。 使用示例 组件.jsx import React fr
解决ant Design中this.props.form.validateFields未执行的问题
01-18
在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行，也没有报错。 原因： 我使用了自定义校验 validator ，在自定义校验方法中有个错误，使用了未定义的变量。 注意： 1、使用validator 时，注意自定义方法中是否有错误；对于如何解决没有错误提示，官网提示：可以选择通过 async 返回一个 promise 或者使用 try…catch进行错误捕获，具体查看官网form组件； 2、使用validator 时，自定义方法中 callback 必须被调用。
Eto.Veldrid:Eto.Forms的Veldrid控件
05-21
埃托·韦尔德里德 提供控件以将图形库嵌入到 GUI框架中。 基于该Veldrid教程，并在静脉融入埃托奥 （感谢菲尔！）。 笔记 着色器以Vulkan风格的GLSL编写，并使用交叉编译到目标后端。 在Directories.Build.props和.targets中，您将找到其他属性和目标来清理输出目录。 这仅仅是表面上的，但是Veldrid确实吸收了相当多的依赖关系，就像4.7.2之前的.NET Framework版本一样，这有助于组织事物。 如果您不同意，请在您自己的项目中忽略它。 为了帮助GUI可执行文件找到重定位的DLL，每个GUI项目都有一个App.config文件，该文件带有<probing>元素，该元素包含允许在子目录中找到程序集的privatePath属性。 但是，.NET Core项目中没有App.config文件，因此，如果您朝那个方向冒险，则需要自己弄清楚。 所
props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react
YmwWow的博客
07-30 2609
错误信息： props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information 意思是dangerouslySetInnerHTML的格式写...
error: props.dangerouslySetInnerHTML must be in the from
风吹云灭
08-22 1349
在react开发的过程中有时我们需要展示一段富文本，react不能够直接解析富文本，需要他的一个属性dangerouslySetInnerHTML <div dangerouslySetInnerHTML = {{_html:"<div>这里放的是html字符串</div>"}} /> 在使用的过程中报错： 出现这个问题的原因是我们使用的格式不对。...
react不解析html元素，并将html元素原样输出到页面？（已解决）
生命不息，奋斗不止
02-07 2128
前端使用react，如果是直接return html元素，react是可以正常解析的，但是如果一个变量中返回了一段html代码，此时，react并不会解析，变量中的html代码，而是将其原样输出到页面 错误代码示范 const html = "<span>111111 </span>"； return (<div>{html}</div>) //这样写页面会直接显示<span>111111 </span> 解决方法 l.
设置原始的HTML：dangerouslySetInnerHTML
uwenhao2008的博客
03-13 2893
 一般我们批量插入一些文章之类的都是直接插入HTML页面的，所以就考虑用到这个属性了var Hello = React.createClass({ render:function(){ var htmlSet = {__html: 'First &amp;middot; Second'}; return ( ...
React中的dangerouslySetInnerHTML
txl2498459886的博客
10-10 1万+
dangerouslySetInnerHTML，翻译过来就是：危险的设置内部HTML。要知道有这么一句话：“永远不要相信用户的输入”。用户有时候不会按照程序员所设想的规则来进行数据的输入，比如想要用户输入数字，用户却输入的是文本，类似的情况比比皆是。
react.js使用非元素属性dangerouslySetInnerHTML
sunshinegyan的专栏
01-02 9787
Uncaught Error: Can only set one of `children` or `props.dangerouslySetInnerHTML` 1.浏览器报错内容：Can only set one of `children` or `props.dangerouslySetInnerHTML‘ 2.解决方法 2.1使用dangerously
react初涉到的坑(长期记录)
今天也要加油呀
06-18 2519
1.创建组件渲染中用的JSX语法一定别忘记闭合标签（在body html处不需要闭合标签，平时也习惯了）！！！最好编辑器装个JSX语法插件。例子：“ embedded: Expected corresponding JSX closing tag for …” 2.在标签里的for不能在正常使用了，而是要写成htmlFor。 ...
react：innerHTML的替代方案dangerouslySetInnerHTML
大香蕉的博客
10-23 2655
通常来讲，使用代码直接设置 HTML 存在风险，因为很容易无意中使用户暴露于。因此，你可以直接在 React 中设置 HTML，但当你想设置。中不仅仅可以设置内容为一个和HTML片段，也可以是一个普通的字符串。是 React 为浏览器 DOM 提供。时，需要向其传递包含 key 为。的对象，以此来警示你。
react中dangerouslySetInnerHTML使用（简洁）
热门推荐
exploringfly的博客
06-05 9万+
在react中，通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。在显示时，将内容写入__html对象中即可。具体如下：&lt;div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} /&gt;如果是直接调用接口中的值，则是以上的写法，如果是单纯的显示固定的内容，用如下的写法：&lt;div dang...
总结dangerouslySetInnerHTML的用法
YMX2020的博客
07-19 2953
总结dangerouslySetInnerHTML的用法 你可以使用react的一个标签属性dangerouslySetInnerHTML，resTempalate`既可以是字符串也可以是带标签的模板 <div dangerouslySetInnerHTML={{__html: resTempalate}} ></div> 双大括号{{}}，是react的写发，第一个大括号是表示这是jsx语法，里面的大括号表示这个属性接受对象形式的参数{__html: resTempalate
react标签属性dangerouslySetInnerHTML将字符串转化为html（动态渲染）
前端361
10-02 3167
根据需求，前端页面有时需要动态展示后端返回的代码，但是此时的代码是字符串类型，直接展示，页面显示的只是字符串，这时就用到了react标签属性dangerouslySetInnerHtml属性； dangerouslySetInnerHtml用法： dangerouslySetInnerHtml = {__html:'这里是后端返回字符串代码'} 注：1，dangerouslySetInne...
控制台Uncaught (in promise) TypeError: props.value.includes is not a function
最新发布
04-05
在这种情况下，`props.value`不是一个数组。 可能的原因是您在使用`props.value`之前没有正确初始化它。确保将值传递给组件时，`props.value`是一个数组。如果您确定它应该是一个数组，但仍然收到此错误，则可能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值