使用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

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您可以使用PRE标签。

  

HTML pre元素（或HTML Preformatted Text）表示预格式化的文本。此元素中的文本通常以非比例（＆＃34;等宽字体＆＃34;）字体显示，与文件中的布局完全相同。此元素中的空格显示为已键入。

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

了解详情

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