react，动态插入数据并添加事件

Question

一段后台配置的html字段，填充到页面的dom结构。
html里面有个id，要点击事件。这样写没效果，我要怎么改

export default class Rule extends React.Component {
    constructor(props) {
        super(props);
    }


    componentDidMount(){
        const copyContentEle = document.getElementById('copy-content');
        if(!utils.isNull(copyContentEle)){
            const copyContent = copyContentEle.textContent;
            copyContentEle.click(function(){
                console.log(copyContent);
            });
        }
        
        
    }


    render() {
        const index = this.props.index;
        return (
            <div className="rule">
                {
                    this.props.data[`rule_text_${index}`] && 
                    <div>
                        <Title index={index} title={this.props.data[`rule_title_${index}`]}/>
                        <div dangerouslySetInnerHTML={{__html: this.props.data[`rule_text_${index}`]}}></div>
                    </div>
                }
            </div>
        );
    }
}

Answer 1

以上代码会报错

Uncaught Error: Minified React error #32; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=32&args[]=130 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

改了另外一种写法

import React from 'react';

export default class Rule extends React.Component {
    constructor(props) {
        super(props);
        
    }

    componentDidMount(){
        const ruleBox = this.refs.ruleBox;
        const index = this.props.index;
        const ruleText =  this.props.data[`rule_text_${index}`];
        ruleBox.innerHTML = ruleText;

        const copyContentEle = document.getElementById('copy-content');
        if(!utils.isNull(copyContentEle)){
            const copyContent = copyContentEle.textContent;
            copyContentEle.onclick = function(){
                //do
            }
        }
    }
    render() {
        const index = this.props.index;
        return (
            <div className="rule">
                {
                    this.props.data[`rule_text_${index}`] && 
                    <div className = "rule-content">
                        <Title index={index} title={this.props.data[`rule_title_${index}`]}/>
                        <div ref="ruleBox"></div>
                    </div>
                }
            </div>
        );
    }
}

Answer 2

  componentDidMount() {
    const copyContentEle = document.getElementById('copy-content');
    const copyContent = copyContentEle.textContent;
    // copyContentEle.click(function () {
    //   console.log(copyContent);
    // });
    copyContentEle.onclick=function(){
      console.log(copyContent);
    }
  }

绑定事件写错了 jq写多了吧。。