请问 用外部js 要如何去调用react内部的方法哟

#1

最近 做项目遇到要在html这个页面上，使用js调用react内部的方法，做为新手的我现在还是一脸迷茫:joy:

#2

之前也遇到类似的问题，我是通过全局事件解决的

1 Like
#3

全局变量 不能调用 react中的方法 只能改变 值

#4 
写了个示例，可以保存成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>
1 Like