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

IT技术 javascript ecmascript-6 reactjs
2022-07-27 02:04:25

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

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？

1个回答

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

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

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

小提琴

其它你可能感兴趣的问题
上一篇React - 意外的模板字符串表达式：no-template-curly-in-string 下一篇从回调中访问状态