在 react.js 中像纯文本一样显示 javascript/html 代码答案

【问题标题】：Display javascript/html code like plain text in react.js在 react.js 中像纯文本一样显示 javascript/html 代码
【发布时间】：2017-03-10 16:00:45
【问题描述】：

如何在 react.js 渲染中显示 javascript/html 代码。

我试过这样

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong </p>';

return (
    <div>
        <div dangerouslySetInnerHTML={{__html: thisIsMyCopy}}>
        </div>
    </div>
)

这是 html 代码.. 但我也想在我的屏幕上显示 javascript 代码...我该怎么做.. 你能指导我..如何继续它

【问题讨论】：

您永远不必使用dangerouslySetInnerHTML。我建议你马上停下来。

标签： javascript html reactjs react-native

【解决方案1】：

如果要在html中显示“代码”，可以使用

<code>something</code>

标签，它将在屏幕上显示您的代码。

【讨论】：

但仅适用于 HTML5 ;)

【解决方案2】：

它已经是字符串版本，只需要将变量包含在花括号内。 dangerouslySetInnerHTML 用于将 html 字符串转换为实际 html 的情况。

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong </p>';

return (
  <div>
    {thisIsMyCopy}
  </div>
)

如果你想要一个函数的字符串版本，只需使用任何函数并像这样添加一个字符串：

function functionString() { console.log('stringed function") }

var functionAsString = '' + functionString

return (
  <div>
    {functionAsString}
  </div>
)

这是一个演示这个的工作笔http://codepen.io/finalfreq/pen/JRqEWW

【讨论】：

您能说得更具体些吗？像字符串化的javascript函数？您会在代码编辑器中看到它们吗？