Only set one of `children` or `props.dangerouslySetInnerHTML的解决

标题虽然只是一个报错的信息的解决，但还是想通过这一个问题，给大家分享一下我在碰到类似问题时的解决思路

特别是在写react+typescript项目的时候，会频繁的出现很多红线和报错，导致代码都没办法正常运行，但是众所周知，报错都是英文的，所以解决思路就很重要了

问题描述

之前在写React项目的时候，碰到了一个问题，先来上图片（需求是在div中插入一段html）

报了一个错误

Only set one of children or props.dangerouslySetInnerHTML

字面意思是：只能设置孩子或者危险的设置里面的html之一

有道翻译都翻译不出来，children or props.dangerouslySetInnerHTML 的具体含义

字面意思又根本看不懂到底啥玩意儿

假如你的英文并不好，翻译工具也没用的话，碰到这种问题应该怎么解决呢？

碰到英文报错看不懂时

其实我认识的很多coder，英文并不好，但他们解决这种报错总是很快

为什么呢？

一个是因为他们长期的经验，另一个就是因为他们对前端基础元素很熟悉

一个有经验的coder往往看到代码里的children，会反应出子节点，而不是孩子

像html里有很多专业的英文术语和专业性比较强的单词意思

比如：

1. vue中的有种通信方式，都喜欢把变量命名为 bus ，但bus我们常见的是公交车的意思，在这里用的是总线

2. 还有些“专业术语”，会把下拉刷新出现的loading转动图标叫做 “菊花”（这是我们公司的叫法）

等等这些其实都是和自己对代码的熟悉和经验的高低程度有关

props.dangerouslySetInnerHTML中的props其实就是属性，dangerouslySetInnerHTML是react中html标签的属性名

所以翻译过来这个报错应该是

只能设置子节点或者dangerouslySetInnerHTML属性之一

问题解决

知道了报错描述的意思，那问题就还算比较好解决了

<div dangerouslySetInnerHTML={{_html:subItem.content as String}}> </div>

仔细的小伙伴应该发现了问题，我需要通过设置dangerouslySetInnerHTML属性来插入后端传的html，所以使用了dangerouslySetInnerHTML属性，但是我在<div>中多了个空格，所以报错

根据stackOverflow上很多大佬给出的回答发现，如果使用了dangerouslySetInnerHTML属性，不能再html标签中写任何东西，包括空格和注释，都不行

参考连接