使用 JSX 在 <code> 标记内渲染 JavaScript答案

【问题标题】：Render JavaScript inside a <code> tag with JSX使用 JSX 在 <code> 标记内渲染 JavaScript
【发布时间】：2016-05-13 15:31:02
【问题描述】：

我正在使用 React 来渲染一些 UI 组件。我想在 <code> 标记内显示一些 JavaScript 代码。我尝试了以下方法：

class A extends React.Component {
    render() {
        return(
            <pre><code>
                (function(a, b) {
                    var s = a.prop;
                    // ...
                }(c, d));
            </code></pre>
        );
    }
}

当我尝试使用 webpack 和 Babel 编译此脚本时，我在 var s = a.prop 行收到了一个意外的令牌错误。如何正确呈现此 JavaScript？

【问题讨论】：

您想返回一个字符串，但引号中没有任何内容...
以上代码是用 JSX 语法编写的。返回的是一个 React 元素。生成 React 元素的代码由 JSX 转译器自动生成。

标签： javascript reactjs ecmascript-6 react-jsx

【解决方案1】：

@Pamblam 是对的，你确实需要一个字符串：

  render() {
    var foo = `
      (function(a, b) {
        var s = a.prop;
        // ...
      }(c, d));
    `

    return (
      <pre>
        <code>{foo}</code>
      </pre>
    )
  }

fiddle

【讨论】：

您可以使用{` ... `} 转义 JSX 中的多行字符串。
@Aaron 这是我首先尝试的，但没有成功。我只是回去再试一次，它确实做到了。唔。我认为字符串中的 IIFE 是 jsx 中括号字符串的一些边缘情况