Javascript 在react中的字符串中添加html元素

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

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

JSON.stringify(myJSON, null, 4);

此更改将触发我的类中的

渲染

在这个json中，我有一个时间戳值，我将其转换为可读时间。在串接之前我会这样做，比如：

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

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

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

return (
{props.conditionMet ? <div>props.anyContentYouLike</div> : null}
);

现在是奇怪的事情：
我需要在转换后的时间戳旁边有一个按钮。在以前版本的应用程序中，我很容易做到这一点，如下所示：

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

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

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

return (
{props.conditionMet ? <div>props.anyContentYouLike</div> : null}
);

myJson.timestamp=myJson.timestamp+”（“+newDate（parseInt（myJson.timestamp）*1000）+”）操作！”

它在页面中呈现了我的按钮

但是react只是将其作为字符串写入，而不渲染它。我猜这是因为ReactDOM没有将其作为新的HTML元素进行解析，因为
render
不会在任何地方触发

我想知道在react中是否有可能做这样的事情，以及如何做。正如你所看到的，尝试在那个地方以反应的方式呈现按钮是相当复杂的，我不知道如何真正做到这一点。
Edeph

我可能误诊了您遇到的问题，因为我看不到整个React组件的行为异常

然而，根据您所描述的，我认为问题在于您同时对JSX（即，
action！
）和javascript代码进行了托管。这当然是可行的，也是React的常见用例；但是，需要以类似的方式进行：

myJson.timestamp = myJson.timestamp + "( " + newDate(parseInt(myJson.timestamp) * 1000) + " )

const MyButton () {
  return (
    <div>
      {myJson.timestamp}
      <button>action!</button>
    </div>
  );
}

myJson.timestamp=myJson.timestamp+”（“+newDate（parseInt（myJson.timestamp）*1000）+”）
常量MyButton（）{
返回(
{myJson.timestamp}
行动！
);
}

这里的关键是JSX表达式应该始终用括号括起来，与JSX共定位的JS表达式需要用花括号括起来

我希望这是有帮助的

从阵列渲染组件
如果您有一组时间戳，则可以按如下方式渲染按钮组件：

return myTimestamps.map(timestamp => {
  const myButton () {
    return (
      <div>
        {timestamp}
        <button>action!</button>
      </div>
    );
  }
}

返回mytimestamp.map（timestamp=>{
常量myButton（）{
返回(
{时间戳}
行动！
);
}
}

这将产生一列时间戳，每个时间戳都有一个按钮。
实际上，我想在评论中问一个问题，给你一个完整的答案，但我的声誉还不够好

您必须像这样使用以下属性：
dangerouslysetinerhtml={{{uuuhtml:{yourthtmlastring}}
：

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

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

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

return (
{props.conditionMet ? <div>props.anyContentYouLike</div> : null}
);

render:function（）{
返回(
);
}

以下是一个工作示例：

话虽如此，在大多数情况下，有一些方法可以避免此问题，除非您从服务器端应用程序返回动态呈现的HTML，而这些HTML的结构可能会有很大差异。但是，如果HTML的结构基本相同，并且只更改了内容，您可以动态呈现或省略JSX的某些部分，如下所示：

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

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

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

return (
{props.conditionMet ? <div>props.anyContentYouLike</div> : null}
);

返回(
{props.conditionMet？props.anyContentYouLike:null}
);

您还可以基于上述想法，提出更复杂的解决方案：

render () {
innerHTML = props.conditionMet ? <div>props.anyContentYouLike</div> : null};
return innerHTML;
}

render（）{
innerHTML=props.conditionMet？props.anyContentYouLike:null}；
返回innerHTML；
}

希望这会有所帮助。
@AnaLizaPandac为我提供了解决此问题的正确方法。
危险的SetinenerHTML
是我正在寻找的，但我想花一点时间深入了解一下为什么此解决方案通常是错误的，以及我实际需要它的原因。您可以找到此属性的文档

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

我希望我现在对基于dom的XSS的工作方式是错误的，如果我误解了什么，请留下评论。
这就是你的意思吗？@AnaLizaPandac这正是我所需要的！我在谷歌搜索时看到了
危险的HTML
，但我不确定它是否是我所需要的。我会在你的解决方案中留下答案，然后再试一次解释一下为什么一般情况下使用它是错误的，以及为什么我的角盒是正确的。非常感谢！不客气。嗨！也许我在我的示例中不是非常清楚。我需要在解析的JSON中内联显示按钮，其中有很多行。虽然您的解决方案是正确的，但它会在整个JSON之后显示按钮，这不是我需要的。@Edeph，很抱歉误解。如果
myJson.timestamp
是多个时间戳串联的结果，那么最好将其转换为一个时间戳数组。这样，使用上面相同的
myButton
组件，您可以映射时间戳数组，将每个时间戳插入到自己的
myButton中组件。根据您的说明更新我的原始帖子。我没有说任何关于连接的内容。它只是关于内联显示按钮，而不是作为预设标记（标准方式）.setInnerHTML是我想要的解决方案。请查看我的问题的注释，其中有一个代码片段。正如我在问题中所述，您所说的react做事方式非常正确。但您的示例与我的问题不一致。我需要在speci旁边显示一个带有按钮的字符串化JSON对象fic字段（JSON对象可能非常大！）。因此JSON对于浏览器来说只是一个字符串，我无法开始拆分它以插入该按钮。设置内部HTML实际上是一个很好的解决方案，因为它允许我在字符串化和