html中的外部js调用react内部的方法

小咪咪 2021-06-22 15:37 541阅读 0赞

写了一个html，可以直接在浏览器上打开。

<!DOCTYPE html>
    <html>
    <title>React</title>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    
    <body>
      <div id="root">
        
      </div>
      
      <script>
        'use strict';
    
        var apiAccepter;// external JS Object
    
        class Component extends React.Component {
    
          constructor(props) {
            super(props);
            this.internalMethod = this.internalMethod.bind(this);
          }
    
          render() {
            return React.createElement(
              'h1',
              null,
              'Hello, world!'
            );
          }
    
          componentDidMount() {
            let { apiRef } = this.props;
            //return internal method
            apiRef({ internalMethod: this.internalMethod });
          }
    
          internalMethod() {
            console.log('message')
          }
        }
    
        ReactDOM.render(
          React.createElement(
            Component,
            {
              apiRef: function (apiRef) { apiAccepter = apiRef }// connection between internal and external
            }
          ),
          document.getElementById('root')
        );
    
        apiAccepter.internalMethod()// external JS invoke internal Method
    
      </script>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，541人围观）

还没有评论，来说两句吧...

相关阅读

相关 html调用js中对象参数传递,js中获取事件对象的方法小结

var evt = window.event || arguments\[0\]; 下面分三种添加事件的方式讨论，你也许会看到以前没有看到过的获取方式。 1，第一种添加事件

约定不等于承诺〃/ 2022年10月06日 07:53/ 0 赞/ 341 阅读

相关 js调用方法中的方法

<!DOCTYPE html> <html> <head> <title>函数调用</title> <meta ch

港控/mmm°/ 2022年09月25日 01:16/ 0 赞/ 187 阅读

相关 html a标签中调用js的几种方法

我们常用的在a标签中有点击事件： 1. a href="javascript:js\_method();" 这种方法在传递this等参数的时候很容易出问题，而且java

电玩女神/ 2022年09月23日 08:49/ 0 赞/ 265 阅读

相关 Spring Boot 调用@Async异步方法创建线程2种方式（调用外部的异步方法，调用内部的异步方法）

1 Maven依赖 <dependency> <groupId>org.projectlombok</groupId>

清疚/ 2022年09月11日 14:23/ 0 赞/ 161 阅读

相关内部调用由于外部调用

在自己搞demo 时候，发现django的结果我可以从url请求中获取，也可以在内部调用函数获取。我选择了前者。在后期的部署时，测试端口频繁的改变让我欲哭无泪，所以内

电玩女神/ 2022年06月15日 10:07/ 0 赞/ 348 阅读

相关 mybatis调用内部类的方法

1. mybatis 映射写法： com.XXX.A$B , 注意A类和B类之间用 $　表示内外关系，而不是常用的　．点号。 2. 内部类需要用static修饰要不然会

快来打我*/ 2022年05月28日 10:15/ 0 赞/ 122 阅读

相关 html a标签中调用js的几种方法

我们常用的在a标签中有点击事件： 1. a href="javascript:js\_method();" 这是我们平台上常用的方法，但是这种方法在传递this等参数的

不念不忘少年蓝@/ 2022年03月11日 14:00/ 0 赞/ 357 阅读

相关 html调用js中的方法未定义

html调用js中的方法未定义报错信息： index.html:485 Uncaught ReferenceError: show is not defined

末蓝、/ 2022年02月14日 03:50/ 0 赞/ 389 阅读

相关如何在js中调用layui.use()内部的方法

使用layui时，可能会出现一个问题，就是在layui.use()内部的方法依赖于layui的模块，但是当外部js调用layui.use()内部的方法时，会出现无法调用的情况，

r囧r小猫/ 2021年09月24日 15:14/ 0 赞/ 798 阅读

相关 html中的外部js调用react内部的方法

写了一个html，可以直接在浏览器上打开。 <!DOCTYPE html> <html> <title>React</title> <meta

小咪咪/ 2021年06月22日 15:37/ 0 赞/ 542 阅读