使用jsx时有没有更好的输出多行示例代码的方法？

Question

我正在尝试按原样输出一段示例代码。不是 HTML 我要输出的代码 javascript。我不想呈现代码。我只想展示一个如何做某事的例子。例如，我希望它出现在我的页面上：

if(a==b){ 
   console.log('a is the same as b)
}

我一直在网上研究，我能找到的唯一选择是用 {``} 包围它。但是，这会产生一个问题，我必须像这样手动包含空格和中断：

{`if(a==b){`}
<br />
{`\u00A0\u00A0\u00A0\u00A0console.log('a is the same as b)`}
<br />
{`}`}

如您所见，对于大量示例代码，这会变得非常麻烦。有谁知道使用 jsx 输出更大块示例代码的更好方法吗？

Answer 1

const App = () => (
  <pre>{`
          if(a==b){ 
            console.log('a is the same as b)
          }
      `}
    </pre>
);

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

您可以使用 PRE 标签。

The HTML pre element (or HTML Preformatted Text) represents preformatted text. Text within this element is typically displayed in a non-proportional ("monospace") font exactly as it is laid out in the file. Whitespace inside this element is displayed as typed.

在 https://developer.mozilla.org/en/docs/Web/HTML/Element/pre

阅读更多内容

    <pre>{`
          if(a==b){ 
            console.log('a is the same as b)
          }
      `}
    </pre>

使用jsx时有没有更好的输出多行示例代码的方法？

Is there a better way of outputting multiple lines of example code when using jsx?

jsx

reactjs

react-jsx