如何使用危险地设置注入功能

Question

这些代码可以正常工作，但是我想向其中添加onClick事件（感谢how can injection dynamic html element to page with next.js?中的@ cr05s19xx）

class TestComponent extends React.Component {
    static async getInitialProps() {
        const text = '<div class="homepsage">This is the homepage data</div>';
        return { text };
    }

    render() {
        return (
            <div>
                <div className="text-container" dangerouslySetInnerHTML={{ __html: this.props.text }} />
                <h1>Hello world</div>
            </div>
        );

更改为：

function func1(me) {
    console.log(me.options[me.selectedIndex].value);
}
class TestComponent extends React.Component {
    static async getInitialProps() {
        var text = '<select onchange="func1(this)" >';
             text += '<option value="1"> text1 </option>';
             text += '<option value="2"> text2 </option>'
          </select>
        return { text };
    }

    render() {
        return (
            <div>
                <div className="text-container" dangerouslySetInnerHTML={{ __html: this.props.text }} />
                <h1>Hello world</div>
            </div>
        );
    }
}

但是在浏览器中的输出是这个

             ReferenceError: func1 is not defined [Learn More]

请让我对您的帮助感到满意：）