在<代码>使用JSX标记

Render JavaScript inside a <code> tag with JSX

本文关键字：JSX 标记 使用 代码 lt gt      更新时间：2023-09-26

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

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

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

小提琴

相关文章：