Question

使用

进行反应渲染，你好

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

渲染时html就像

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

Answer 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>
}

ReactJS使用函数插入RAW html（onClick）

1 个答案: