ReactJS如何访问页面中已存在的JS对象（无需API调用）？

嘿，这个问题我之前也碰到过，其实不用REST API也有好几种靠谱的解决办法，核心思路就是避开变量名被压缩混淆的问题，下面给你详细说两个实用方案：

方案一：把对象挂载到window全局对象 #

压缩工具（比如Terser）只会混淆局部/模块级别的变量名，不会动window上的属性名。所以你可以在页面的脚本里把目标对象直接挂载到window上：

// 页面中的原生JS代码（不要放在React打包的代码里）
window.MyAppGlobalData = {
  userName: "John",
  appSettings: { theme: "dark" }
};

然后在React组件里，不管是类组件的componentDidMount还是函数组件的useEffect，都可以直接访问：

// 类组件示例
componentDidMount() {
  const appData = window.MyAppGlobalData;
  this.setState({ appData });
}

// 函数组件示例
useEffect(() => {
  const appData = window.MyAppGlobalData;
  setAppData(appData);
}, []);

你之前找不到对象，大概率是因为原来的变量名被压缩工具改成了类似a、b的短名称，而挂载到window后属性名不会被修改，自然就能访问到了。

方案二：通过DOM的data-*属性传递对象 #

如果不想用全局对象，还可以把对象序列化成JSON字符串，存在页面根元素的data-*属性里：

<!-- 页面的根元素 -->
<div id="root" data-app-data='{"userName": "John", "appSettings": {"theme": "dark"}}'></div>

然后在React组件里读取并解析这个属性：

// 类组件
componentDidMount() {
  const rootElement = document.getElementById('root');
  const appData = JSON.parse(rootElement.dataset.appData);
  this.setState({ appData });
}

// 函数组件
useEffect(() => {
  const rootElement = document.getElementById('root');
  const appData = JSON.parse(rootElement.dataset.appData);
  setAppData(appData);
}, []);

这种方式更“干净”，不会污染全局作用域，而且同样不会被压缩工具影响，因为DOM属性名是固定的。

注意事项 #

• 如果你的对象包含敏感数据，这两种方法都要谨慎，因为前端代码是完全暴露给用户的，敏感信息可能会被泄露。
• 确保序列化对象的时候没有语法错误，比如JSON字符串要用单引号包裹（因为HTML属性本身用双引号），或者转义双引号。

内容的提问来源于stack exchange，提问作者tscrip