Javascript 使React中的变量可用于外部html文件

我正在设置一个电子商务，通过iframe将信用卡数据添加到前端。支付流程的一部分包括生成JWT，iframe将使用该JWT清除信用卡金额和其他有关交易的具体细节

我这里的问题是，实际的JWT将在React中生成，我需要以某种方式与iframe中html文件上运行的脚本进行通信，该脚本与支付服务进行通信

我一直在阅读这篇文章，发现了一些关于使用createreact应用程序添加自定义环境变量的有用信息，我使用了这些信息

我的问题是createreact应用程序中的文档描述了两种实现这一点的方法，这取决于在运行时或构建时是否需要变量（）

由于我对这个问题缺乏了解，我真的不知道哪种方法适合我，能够发送JWT

除了表单的一些基本html之外，iframe还包含以下代码

 <script> 
  (function() {
   var st = SecureTrading({  
    jwt: "INSERT JWT HERE"

    });  
   st.Components(); 
  })(); 
 </script>

（功能（）{
var st=证券交易（{
jwt：“在此处插入jwt”
});  
st.组件（）；
})(); 

简单地说，这是不可能的

第一个解决方案

您不能将React应用程序内部的任何变量带到外部，除非您使用

window.VarName

从内部进行操作，这样您就可以从外部访问

VarName

。同样，这里有两个问题

这造成了全球范围的污染

您如何确定或知道变量是否已设置

放弃这个解决方案，但它仍然可能有效

第二种解决方案（最常见和最有效）

另一种方法是使用

localStorage

并从

localStorage

获取值。这你也可以在另一页单独做！您可以做的是，在进行AJAX调用后，类似于下面的代码：

//从前端调用身份验证服务。
AuthUser（用户名、密码，（res、err）=>{
//如果请求是错误，请添加错误状态。
如果（错误）{
this.setState（{Error:res.response.data.Message}）；
}否则{
//如果没有错误，进一步检查是否为200。
如果（资源状态===200）{
//我们需要从服务器返回JWT。
//res.data包含消息和JWT。我们需要JWT。
//解码JWT并将其存储在状态。
解码JWT（res.data.JWT，data=>
//这里，data.data将具有解码的数据。
this.setState（{Data:Data.Data}）
);
//现在，要在刷新后保持登录，请将其存储在localStorage中。
//检查是否存在本地存储支持。
if（存储类型！=“未定义”）{
//将JWT设置为本地存储。
setItem（“JWT”，res.data.JWT）；
}
}
}
});

我从基础知识和第4部分写了一篇关于这方面的文章，我解释了JWT和在

localStorage

中存储。查看更多详细信息

---

完整的代码和演示：

（不可能）但是如果不阅读您的帖子内容，如果我要评论，您不能将React应用程序中的任何变量带到外部，除非（第一个解决方案）您使用

窗口从内部执行。VarName

，这样您就可以从外部访问

VarName

。再次，这造成了全球范围的污染。这是你期待的吗？如果有帮助的话，我可以用一个例子来回答这个问题。（第二种解决方案）另一种方法是使用

localStorage

并从

localStorage

获取值。这你也可以在另一页单独做！这有帮助吗？是的，我确实意识到你提到的全球范围污染，不幸的是，我无法想出任何其他解决方案，因为必须在iframe中包含上面的代码，而且还必须让他们以某种方式进行通信以传递一些信息谢谢，也许使用localStorage是一个更干净的解决方案！！阅读这个问题，不管您是否使用React，JWT通常（不是说良好实践）存储在

localStorage

中，因此很容易访问。因此，我建议第二种解决方案，我在上面已经说过了。我可以用

localStorage

写一个答案吗？