react动态渲染----dangerouslySetInner

给字符串加超链接

在react中，一个节点的文案是提前配置好的对象，进行整体渲染，类似以下情况：

const dataList = [{
  name: 'xiaoming',
  content: {
    des: '你好测试环境地址'，
    cont: '你好页面内容点击链接'，  
  }
}, {
  name: 'xiaohong',
  content: {
    des: '你好测试环境1地址2'，
    cont: '你好页面内容1点击链接'，  
  }
}, {
  name: 'xiaolan',
  content: {
    des: '你好测试环境2链接地址'，
    cont: '你好页面内容2http://baidu.com'，  
  }
}]

• 如果你刚好配到一个pd需要你对其中的'地址、点击链接、地址2、http://baidu.com'这些都加上对应的超链接；
  此时你会怎么加呢？
  1）直接超链接
  2）对字符串做匹配处理
  3）模板字符串
  不这些都不行。首先1）3）渲染到页面本身就不会成超链接的形式，2）成本太高，不建议
• 那怎么办呢？
• 答：用dangerouslySetInnerHTML。

多数时候DOM是透过render中设定的结构来处理，有些时候我们想透过字串形式的HTML来做操作时，
dangerouslySetInnerHTML就可以派上用场，将字串转译给render来使用；也可将unicode的编码做呈现，也能防止xss。
用法：
<div dangerouslySetInnerHTML={{__html: '<div>xx</div>'}} />
用开发工具来检视时，透过dangerouslySetInnerHTML产生的 DOM 不会有data-reactid。实际应用上，在制作复杂的component时，也许可以使用它的方法，运用字串的操作来降低render时的结构复杂度。

• 代码如下：

const dataList = [{
  name: 'xiaoming',
  content: {
    des: '你好测试环境<a href="http://xxxx">地址</a>'，
  ....
}]

<div>
   {dataList.map(item => (
     <p
        key={item.content}
        dangerouslySetInnerHTML = {{__html: item.des}}
     />
  ))}
</div>

感谢Thanks♪(･ω･)ﾉ
参考链接1
参考链接2