javascript - 在反应的字符串中添加一个html元素

Question

我知道这不是 React 做事的方式，但这是我需要的，我只是想尝试一个解决方案。

在我的页面中执行操作后，我显示一个 JSON

JSON.stringify(myJSON, null, 4);

此更改触发了render我的班级。

在这个 json 中，我有一个时间戳值，我将其转换为可读时间。我在字符串化之前这样做，如下所示：

myJson.timestamp = `${myJson.timestamp} ( ${newDate(parseInt(myJson.timestamp) * 1000)} )`

现在出现了奇怪的东西：我需要在这个翻译的时间戳旁边有一个按钮。在我的应用程序的以前版本中，我很容易这样做：

myJson.timestamp = myJson.timestamp + "( " + newDate(parseInt(myJson.timestamp) * 1000) + " ) <button>action!</button>"

这在页面中呈现了我的按钮。

但是 react 只是把它写成一个字符串，而不是渲染它。我猜这是因为 ReactDOM 不会将其解析为新的 HTML 元素，因为render它不会在任何地方触发。

我想知道是否有可能在反应中做这样的事情以及如何做。如您所见，尝试以反应方式在该位置呈现按钮非常复杂，我不知道如何实际操作。

标签： javascripthtmlreactjs

Answer 1

@AnaLizaPandac 给了我解决这个问题的正确方法。dangerouslySetInnerHTML是我正在寻找的东西，但我想花点时间更深入地了解为什么这个解决方案通常是错误的，以及为什么我真的需要它。在这里您可以找到此属性的文档。

如您所知，innerHTML这很糟糕，因为它会将您的网页暴露给 XSS 攻击。我为什么要采用这个解决方案呢？此页面不包含与任何其他用户共享的任何信息，也不包含任何易受攻击的输入。我只需要使用时间戳旁边的按钮来装饰我的 JSON 对象，单击该按钮时，会重定向到另一个公共页面（如 google.com）。我相信这种行为不会将我的应用程序暴露给 XSS，并以一种简单优雅的方式解决我的问题。

我希望我现在对基于 dom 的 XSS 的工作方式有误，如果我误解了什么，请发表评论。