如何用原生JavaScript控制React组件？问题解析与方案

我用Webpack打包了一个React组件，想在原生JS里控制它，但直接new实例调用方法没效果，只有自定义事件能触发。相关代码如下：

代码文件 #

App.js #

import React from "react";
import ReactDOM from "react-dom";
import {
  isMobile,
  isFirefox,
  isChrome,
  isEdge,
  withOrientationChange,
} from "react-device-detect";


export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      step: 0
    };
    this.start.bind(this); // 此处存在问题：未将绑定后的函数赋值给this.start
  }

  UNSAFE_componentWillMount() { }

  start() {
    console.log("Starting ...");
    this.setState({step: 1}, () => {
      console.log(this.state);
    });

  }

  componentDidMount() {    
    document.addEventListener(
      "start",
      function () {
        this.start();
      }.bind(this)
    );
  }

  render() {
    let {step} = this.state;
    return (
        <div>
            <div>
                Current step: {step}
            </div>
        </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("my-element"));

webpack.config.js #

const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');
var dotenv = require('dotenv').config({path:'./.env'});

const webpack = require('webpack');

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;


module.exports = {
  devtool: "source-map",
  mode: "production",
  entry: [
    "babel-polyfill",
    "./src/App.js"
  ],
  watch:true,
  optimization: {
    minimize: false,
   
    minimizer: [
      new TerserPlugin({
        
        terserOptions: {
          ecma: undefined,
          parse: {},
          compress: {},
          mangle: true, // Note `mangle.properties` is `false` by default.
          module: false,
          // Deprecated
          output: null,
          format: null,
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: undefined,
          keep_fnames: false,
          safari10: false,
        },
      }),
    ],
  },
  output: {
    libraryTarget: "this",
    filename: "./my-bundle.js",
    path: __dirname + "/build"
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: [
            "@babel/preset-env",
            "@babel/preset-react",
            { "plugins": ["@babel/plugin-proposal-class-properties"] }
          ]
        }
      },
      {
        use: ['style-loader', 'css-loader'],
        test: /\.css$/
      },
      
    ]
  },
  resolve: {
    extensions: [".webpack.js", ".js"]
  },
  plugins: [
      new webpack.DefinePlugin({
        "process.env": dotenv.parsed
    }),
    new BundleAnalyzerPlugin()
    
  ],

};

index.html #

...

<body>
<div id="my-element"></div>

<script src="./static/my-bundle.js"></script>
</body>

...

现象 #

页面正常显示Current step: 0，但执行以下原生JS代码无效果：

var app = new App();
app.start() // 页面状态未发生变化

而通过自定义事件却能正常触发状态更新：

var event = new CustomEvent('start');
document.dispatchEvent(event); // step变为1，页面同步更新

原因解释 #

1. 两个实例完全独立 #

你手动new App()创建的是一个全新的App类实例，和ReactDOM.render(<App />, ...)在页面上渲染的不是同一个对象。页面上的实例由React管理，已经完成挂载并关联DOM；而手动new的实例只是一个孤立对象，既没有绑定DOM节点，也不在React的状态追踪范围内。

2. React状态更新依赖渲染上下文 #

React组件的setState方法只有在组件被React渲染（即通过ReactDOM.render等React官方API创建的实例）时，才会触发组件的重新渲染流程。手动new的实例没有经过React的初始化流程，调用setState只会修改实例内部的state，但不会触发任何DOM更新——因为这个实例根本没有对应的DOM节点。

另外，你的代码存在一个细节错误：constructor里的this.start.bind(this)仅返回绑定后的函数，却没有赋值给this.start，正确写法应该是this.start = this.start.bind(this);，否则部分场景下调用this.start会出现this指向错误。

解决方案 #

方法一：暴露已渲染的组件实例 #

修改App.js中的ReactDOM.render代码，将返回的组件实例挂载到全局对象（如window）上，让原生JS能直接访问页面上的真实实例：

// App.js最后一行修改为
window.myAppInstance = ReactDOM.render(<App />, document.getElementById("my-element"));

之后原生JS即可直接调用：

window.myAppInstance.start(); // 正常触发状态更新和页面渲染

方法二：封装对外暴露的API #

如果不想直接暴露组件实例，可以在App.js中封装一个全局API，将组件方法包装后对外提供：

// App.js末尾添加
let appInstance;
window.MyApp = {
  init() {
    appInstance = ReactDOM.render(<App />, document.getElementById("my-element"));
  },
  start() {
    if (appInstance) {
      appInstance.start();
    }
  }
};

// 初始化组件（也可放在index.html中手动调用）
window.MyApp.init();

原生JS调用方式：

window.MyApp.start(); // 触发状态更新

补充：修复bind问题 #

在App组件的constructor中，正确绑定start方法的上下文：

constructor(props) {
  super(props);
  this.state = {
    step: 0
  };
  // 正确绑定：将绑定后的函数赋值给this.start
  this.start = this.start.bind(this);
}

内容的提问来源于stack exchange，提问作者Nguyễn Tài Long