javascript - 如何将包含 HTML 的字符串解析为 React 组件

Question

我正在使用这个库: html-to-react 因为我发现可以将 HTML 作为字符串“编译”为 React 组件。
我们正在做一个基于小部件的系统，它们可能会随着时间而改变(即添加/删除/更新/等)，因此我们计划将小部件 HTML 从数据库发送到前端，这是使用 React 完成的。
我已经使用 HTML 成功完成了一个简单的小部件，现在我正在尝试使用这个小部件来响应点击事件，所以我想添加 onclick=method()来自 HTML 或 onClick={method} 的方法来自 react 。但是，当我在浏览器的控制台中遇到这些错误时，我无法获得所需的输出。

Warning: Invalid event handler property `onclick`. React events use the camelCase naming convention, for example `onClick`.
    in label
    in span
    in div
Warning: Invalid event handler property `onclick`. Did you mean `onClick`?
    in label
    in span
    in div
    in DireccionComponent (at App.js:51)
    in div (at App.js:50)
    in GridItem (created by ReactGridLayout)
    in div (created by ReactGridLayout)
    in ReactGridLayout (at App.js:49)
    in App (at index.js:11)

我正在使用的代码如下:
应用.js

import React, { Component } from 'react';
import './App.css';
import DireccionComponent from './DireccionComponent.js';

class App extends Component {
    render() {
        return (
            <DireccionComponent />
        );
    }
}

export default App;

DireccionComponent.js

import React, {Component} from 'react';

var ReactDOMServer = require('react-dom/server');
var HtmlToReactParser = require('html-to-react').Parser;

let htmlInput = ''
            +   '<div>'
            +       '<center><label className="title">Widget</label></center>'
            +       '<span className="ui-float-label">'
            +           '<label htmlFor="float-input" onClick={this.myFunction}>Hello</label>'
            +       '</span>'
            +   '</div>';

var htmlToReactParser = new HtmlToReactParser();
var reactElement = htmlToReactParser.parse(htmlInput);
var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);

class DireccionComponent extends Component {
    constructor(props) {
        super (props);

        this.myFunction = this.myFunction.bind(this);
    }

    render() {
        return (
            reactElement
        )
    }

    myFunction() {
        console.log('Hola');
        alert("Hola");
    }
}

export default DireccionComponent;

包.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "html-to-react": "^1.3.3",
    "primereact": "^1.5.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-dom-server": "0.0.5",
    "react-grid-layout": "^0.16.6",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

是否可以获得 alert或使用上述库将 HTML 解析为 React 组件的类似内容？如果是这样，我该怎么做？或者我做错了什么？

编辑
它不一定是我正在使用的库，如果有另一个你曾经使用过并做过类似的事情，我愿意接受这个建议(注意，我不是要软件或库，但是如何在包含我的 HTML 的字符串中调用 onClick 方法或解决方法)

编辑 2
在尝试了一些东西后，我发现删除了这一行:

var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);

摆脱其中一条消息。该库使用该元素来测试当前 HTML 和解析的 HTML 是否相同。我的情况不需要它，但这仍然在控制台中留下当前错误:

 Warning: Invalid event handler property `onclick`. Did you mean `onClick`?
    in label
    in span
    in div
    in DireccionComponent (at App.js:47)
    in App (at index.js:11)

编辑 3
经过一番调查，我发现 dangerousSetInnerHTML 在 this answer
然后我尝试关注 this answer一个放置 alert在我的 HTML 中如下:

'<label htmlFor="float-input" onclick="alert(\'Hello\')">Hello2</label>'

它触发了 alert ，但是如果我声明 myFunction就像在下面的代码中一样(注意我试图将它声明为 function 在类之外，在它内部以及 var myFunction = function() { ... } 一起并分开):

import React, {Component} from 'react';

var ReactDOMServer = require('react-dom/server');
var HtmlToReactParser = require('html-to-react').Parser;

let htmlInput = ''
            //+ '<div>'
            +       '<center><label className="title">Widget</label></center>'
            +       '<span className="ui-float-label">'
            +           '<label htmlFor="float-input" onclick="myFunction()">Hello2</label>'
            +       '</span>'
            //+     '</div>';

var htmlToReactParser = new HtmlToReactParser();
var reactElement = htmlToReactParser.parse(htmlInput);

class DireccionComponent extends Component {
    constructor(props) {
        super (props);

        this.myFunction = this.myFunction.bind(this);
    }

    render() {
        return (
            <div dangerouslySetInnerHTML={{__html: htmlInput}}>

            </div>
        )
    }

    myFunction() {
        console.log('Hola');
        alert("Hola");
    }
}

function myFunction() {
    console.log('Hola');
    alert("Hola");
}

export default DireccionComponent;

但是这次我得到一个新的错误:

ReferenceError: myFunction is not defined[Learn More]

我发现了一个类似的问题: Handling onClick of a <a> tag inside of dangerouslySetInnerHTML/regular html有这个问题，并试图调查更多，发现 this comment这表示来自 dangerouslySetInnerHTML 的事件不会以这种方式触发并链接到 docs .
所以，虽然当我得到 alert 时这似乎是一种解决方法当直接从 onclick 写入时方法，或者可能我没有以正确的方式做，所以如果有更多经验的人可以尝试并澄清，那就太好了。

编辑 4
我找到了一种显示 alert 的方法这样:

将 HTML 写入字符串

通过 dangerouslySetInnerHTML 设置 HTML

在 componentDidMound() React 中的函数使用纯 Javascript 添加 onclick对它起作用。

成功

但是， 我们要做的是 :

创建一些方法，例如:addTwoNumbers或类似的东西

发送 onclick或 onClick从 HTML 字符串调用 addTwoNumbers功能。

每次我们需要添加需要使用 addTwoNumbers 的新组件时重复此操作方法，只需为其编写 HTML，将其保存在数据库中并检索它，然后就可以使用它。

就像是:

...
    <label onClick={myFunction}> My Label </label>
...

或者就像我上面说的:

...
    <label onClick={addTwoNumbers}> My Label </label>
...

允许我获得 alert 的代码如下:

import React, {Component} from 'react';
import Parser from 'html-react-parser';
import {render} from 'react-dom';

var ReactDOMServer = require('react-dom/server');
var HtmlToReactParser = require('html-to-react').Parser;

let htmlInput = ''
            //+ '<div>'
            +       '<center><label className="title">Widget</label></center>'
            +       '<span className="ui-float-label">'
            +           '<label htmlFor="float-input" id="myLabel">Hello2</label>'
            +       '</span>'
            //+     '</div>';

var htmlToReactParser = new HtmlToReactParser();
var reactElement = htmlToReactParser.parse(htmlInput);

class DireccionComponent extends Component {
    constructor(props) {
        super (props);

        this.myFunction = this.myFunction.bind(this);
    }

    render() {
        return (
            <div dangerouslySetInnerHTML={{__html: htmlInput}}>

            </div>
        )
    }

    componentDidMount() {
        console.log('DONE');

        let myLabel = document.getElementById("myLabel");

        myLabel.onclick = function() {
            alert();
            console.log('clicked');
        }
        console.log(myLabel);
    }

    myFunction() {
        console.log('Hola');
        alert("Hola");
    }
}

function myFunction() {
    console.log('Hola');
    alert("Hola");
}

export default DireccionComponent;

考虑到这一点，你知道做我想做的事情的其他方法吗？

Answer 1

解决方案有点hacky，在codesandbox中复制粘贴

class App extends Component {
  constructor(props) {
    super(props);
    this.myfunc = this.myfunc.bind(this);
  }
  componentDidMount() {
    window.myfunc = this.myfunc;
  }
  myfunc() {
    console.log("from myfunc");
  }
  componentWillUnmount() {
    window.myfunc = null;
  }
  render() {
    let inputhtml = "<a onclick=window.myfunc()>HelloWorld</a>";
    return (
      <div style={styles}>
        <div dangerouslySetInnerHTML={{ __html: inputhtml }} />
      </div>
    );
  }
}