Question

我有一个带有index.html页面的React设置，其中包含一个定义简单变量的JavaScript文件：

var pData = {};

在我的index.js文件中，我尝试以一种简单的方式访问此变量：

ReactDOM.render(
  <App presData={ pData }/>,
  document.getElementById('root')
);

但是在运行npm start之后，这不会编译，因为它显示'pData' is not defined。

当我添加一些调试时，我得到一些非常奇怪的东西：

var testData;
if (typeof pData === "object") {
    testData = pData; // Fails on this line because pData is not defined!
} else {
    alert("Typeof pData inside index.js: " + (typeof pData));
}

上面的代码失败了，因为变量没有在代码块中定义，只有当变量被定义为对象时才会执行。

这怎么可能，以及如何在React文件中访问此变量？

提前感谢您的帮助。

保

Answer 1

您可以使用window.pData = {};它可用，但这不是一个好习惯。如果您使用带有babel的ES6，则可以使用import导入变量。

myData.js

var pData = {};
export default pData;

index.js：

import pData from './myData.js';

ReactDOM.render(
  <App presData={ pData }/>,
  document.getElementById('root')
);

Answer 2

这是因为你的js文件包含在html中，所以当staring编译时，index.js不知道pData定义的位置。

假设代码var pData = {};位于名为data.js的文件中，并且它与index.js在同一个文件夹中，请尝试

import './data.js';

在index.js文件的第一行;

React包含无法识别的脚本数据

2 个答案: