使用 JSX 在 <code> 标签内渲染 JavaScript

Question

我正在使用 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？

Answer 1

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

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

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

fiddle

使用 JSX 在 <code> 标签内渲染 JavaScript

Render JavaScript inside a <code> tag with JSX

javascript

ecmascript-6

reactjs

react-jsx