从React组件中的外部加载的HTML访问内部函数

Z时代
2024-01-10
分类：问答

我有以下用例。

我的React组件中加载了一些第三方来源的HTML：

class MyComponent extends Component {
  render() {
    return (
      <div
        dangerouslySetInnerHTML={{ __html: this.props.externalHTML }}
      />
    );
  }
}

在外部加载的HTML内，存在一个针对特定范围的click事件，该事件应调用存在于我的应用程序中的回调函数。

<span onclick="myCallback(param1='asd', param2=123, param3='asdas')">
  Click me!
</span>

我该把 myCallback 函数放在哪里？

如果将其放在组件类中，则单击跨度时会收到以下错误，因为据我了解，该函数对外部加载的HTML不可见：

我的另一个想法是将函数添加到window.myCallback =

...主index.js文件内的window对象中，以便在每次应用加载时加载。这样工作，但我有两个问题。

我的理解是，这不是正确的React方法。

每当我单击span元素时，都会两次触发回调函数，但我不明白为什么。

有什么建议？

回答：

使用“ dangerouslySetInnerHTML”作为名称^^是…“ dangerous”，实际上也不是纯React方法。

但是，如果必须这样做，则可以执行以下操作（默认情况下，可以利用React内置的jQuery）

=====

从此处编辑的版本：（仅使用1个组件）

export default class MyComponent extends Component {
  componentDidMount() {
    // using jQuery to manipulate DOM element form third-party source
    // NB. you may think of using setTimeout here, to wait for the external source to be fully loaded here, of course it's not so safe
    // but anyway, we are using "dangerouslySetInnerHTML" anyway => quite dangerous, though ^^
    // setTimeout(function(){   
      $(document.findElementsByTagName("span")[0]).click(function(e){ 
      // or perhaps $("#spanID").click if you can, just be careful between DOM element and react component
          e.preventDefault();
          // DO SOMETHING HERE, just like you do in the window.onload function
          // or maybe you also need to get param values by getting $(this).data("...") or $(this).attr("ATTRIBUTE-NAME")
          return false;
      });
    // });
  }
  render() {
    return (
      <div
        dangerouslySetInnerHTML={{ __html: this.props.externalHTML }}
      />
    );
  }
}

=====

此处的旧答案：（使用2个组件）

export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.callbackOnThisComponent = this.callbackOnThisComponent.bind(this);
  }
  callbackOnThisComponent(param1, param2, param3) {
    // do whatever you like with the above params
  }
  render() {
    return (
      <ChildComponent triggerCallbackOnParent={this.callbackOnThisComponent} />
    );
  }
}

export default class ChildComponent extends Component {
  componentDidMount() {
    // using jQuery to manipulate DOM element form third-party source
    let that = this;
    // NB. you may think of using setTimeout here, to wait for the external source to be fully loaded here, of course it's not so safe
    // but anyway, we are using "dangerouslySetInnerHTML" anyway => quite dangerous, though ^^
    $(document.findElementsByTagName("span")[0]).click(function(e){ 
    // or perhaps $("#spanID").click if you can, just be careful between DOM element and react component
        e.preventDefault();
        that.props.triggerCallbackOnParent(param1, param2, param3);
        // or maybe you need to get param values by getting $(this).data("...") or $(this).attr("ATTRIBUTE-NAME")
        return false;
    }, that);
  }
  render() {
    return (
      <div
        dangerouslySetInnerHTML={{ __html: this.props.externalHTML }}
      />
    );
  }
}