ReactJS 用函数插入 RAW html (onClick)答案

【问题标题】：ReactJS Insert RAW html with function (onClick)ReactJS 用函数插入 RAW html (onClick)
【发布时间】：2017-05-31 20:05:23
【问题描述】：

你好可以用反应渲染

<div dangerouslySetInnerHTML={{__html: this.state.test}} />

渲染的html是这样的

this.state = {
      test: "<button onClick={this.test.bind(this)}>test</button>"
}

【问题讨论】：

将 html 分配给 state prop 而不是变量是否有特殊原因？

标签： html reactjs render

【解决方案1】：

不知道你为什么要这样做，但如果你使用 dangerouslySetInnerHTML，那么我认为这与将字符串硬编码到 HTML 文件中完全一样，即 onClick 应该是 onclick（小写）和处理函数需要被引用并且将在全局文档窗口范围内。这可能不是你想要的。

将渲染内容所需的信息存储为状态对象并创建<button> 作为常规反应元素会更有意义。

this.state = {
      type: 'button',
      handler: this.test.bind(this),
      text : 'test'
}
...
renderElement(){
  const {type, handler, text} = this.state
  if(type === 'button'){
     return <button onClick={handler}>{text}</button>
  }
}
...
render(){
   <div>{this.renderElement()</div>
}

【讨论】：

我将SVG地图存储在数据库中，只需要添加点击方法
你能把你的 SVG 包装在一个 react（不是 DOM）
元素中，然后以正常方式绑定点击处理程序吗？
是的，我是这样做的，所以我加载了 SVG 地图，然后通过 ID 绑定了 addEvenetListener 函数，它为我解决了 :)