我正在我的HTML中为geoplugin设置脚本,将结果分配给窗口,并尝试访问组件中的变量。问题是,在组件中,我可以console.log(window)并查看变量,但是任何点符号都会导致未定义。
这是我的HTML中的脚本:
<script type="text/javascript">
setupGeo = (o) => {
//This is one way I've tried it, setting a Geo object
window.Geo = {};
Geo.geoplugin_city = o.city;
Geo.geoplugin_region = o.region;
console.log(Geo.geoplugin_city); //works and returns my city
console.log(Geo.geoplugin_region); //works and return my state
//This is a second way I've tried it, assigning it to a function that
//returns the variable
window.geoplugin_latitude = function() { return o.lat; };
window.geoplugin_longitude = function() { return o.lon; };
console.log(window.geoplugin_longitude); //returns function
console.log(window.geoplugin_longitude); //return function
}
</script>
<script type="text/javascript" src="//extreme-ip-lookup.com/json/?
callback=setupGeo" async></script>
如您所见,脚本正在按预期工作。我尝试了两种不同的方法,并将它们都作为示例。
在我的React组件中,我正在使用ComponentDidMount方法来检索值,并最终将它们设置为state。
这是问题所在:我可以在控制台窗口中查看所有值,但是当我尝试用点号表示时,却无法定义。
componentDidMount() {
console.log('componentmounted', window)
// Window ...{Geo:{geoplugin_city: "MyCity", geoplugin_region: "MyState"}}
// ...geoplugin_latitude: f() ... geoplugin_longitude: f()
console.log('componentmounted', window.Geo) // undefined
console.log('componentmounted', window.geoplugin_latitude) //returns
//function
console.log('componentmounted', window.geoplugin_latitude()) //gives error
//that window.geoplugin_latitude isn't a function
}
因此,我可以看到所需的窗口变量,只需在Window对象中访问它们即可。我已经研究了如何使用Window对象,但这不是问题,因为我可以在Window Object中看到变量。当我尝试使用它们时,它们只是变得不确定。我还尝试了ComponentWillMount甚至UNSAFE_componentWillMount(),但是由于我正在Window中检索变量,所以这不是问题。
关于React如何工作的任何想法使这成为问题,以及如何进入Window获取变量?