html中的外部js调用react内部的方法-CFANZ编程社区

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

写了一个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">
    <!-- This div's content will be managed by React. -->
  </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 条评论