16

我正在使用这个库: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;

方向组件.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 组件?如果是这样,我该怎么做?或者我做错了什么?


编辑

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


编辑 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这个答案中发现

然后我尝试按照这个答案在我的 HTML 中放置一个alert,如下所示:

'<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 with this question,并尝试进行更多调查,发现这条评论dangerouslySetInnerHTML不会以这种方式触发来自文档的链接。

因此,虽然这似乎是一种解决方法,当我alert直接从该onclick方法编写时,或者可能我没有以正确的方式进行操作,所以如果有更多经验的人可以尝试并澄清,那就太好了。


编辑 4

我找到了一种以alert这种方式显示的方法:

  • 将 HTML 写为字符串
  • 通过设置 HTMLdangerouslySetInnerHTML
  • 来自ReactcomponentDidMound()的函数使用纯 Javascript 向其添加onclick函数。
  • 成功

但是,我们正在尝试做的是

  • 创建一些方法,例如:addTwoNumbers或类似的东西
  • 在 HTML 字符串调用函数中发送一个onclick或。onClickaddTwoNumbers
  • 每次我们需要添加一个需要使用该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;

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

4

4 回答 4

8

解决方案有点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>
    );
  }
}
于 2018-05-28T07:38:03.753 回答
0

我不知道它是否适用于您的特定情况,但一个想法是根本不解析 HTML。你可以告诉 webpack 为不同的文件集生成单独的包。现在,我从来没有这样做过,但我已经读了好几遍了,你可以;例如,这个

然后,您可以拥有一个 main.bundle.js,其中包含您网站的所有未更改部分。此外,为每个可以更改的小部件创建一个 widget1.bundle.js 等等。导入 index.html 上的所有内容。然后,将您的网络服务器配置为从不缓存较小的包(widget1 等)。每当用户进入网站时,它都会再次下载这些小部件,从而有效地更新它们。如果你想更花哨,你可以提供一个 API 与每个小部件的当前版本,并在小部件捆绑包上放置一个额外的字段与版本,这样你就可以定期检查组件是否是最新的,在用户有一段时间没有重新加载页面的事件。如果您发现一个过时的组件,只需强制重新加载,浏览器将确保获取最新版本。

我知道这与您要走的路完全不同,但是如果它对您的特定情况有好处,我相信它会比手动解析 html 和自己处理所有请求。

于 2018-05-21T14:57:00.113 回答
-1

为什么不使用浏览器 DOMParser API 将您的 HTML 解析为屏幕外/分离的 DOM,然后遍历该 DOM 并用于React.createElement()构建 React 的 DOM?就像是

let str = "... your HTML ..."

function traverse(node) {
  let children = []
  for (let i = 0; i < node.children.length; i++)
    children.push(traverse(node.children.item(i)))
  return React.createElement(node.localName, null, children)
  // or maybe use the following instead (React's API doc
  // isn't very clear about this):
  // return React.createElement(node.localName, null, ...children)
}

let reactElementForStr =
  traverse(new DOMParser().parseFromString(str, 'text/html'))

请注意,我对 React 的内部工作原理只有一丁点了解,根本没有测试过。

于 2018-05-25T10:05:00.067 回答
-1

最简单的方法是 Dangerously Set innerHTML

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;

但这是有代价的,将 HTML 字符串动态嵌入到模板中会导致安全违规,这就是为什么它具有奇怪的语法 __html 和一个可怕的名称 dangerouslySetInnerHTML。如果您使用它,请确保清理输入参数以防止任何 XSS 吸引。或者,您可以使用 iframe

从下面的笔检查完整的实现(推荐) https://codepen.io/varmakarthik12/pen/zaOzPw

于 2018-05-28T12:12:03.823 回答