如何在 React/JSX 组件中嵌入文字 <code> 片段？

Question

我是 React 的新手，我正在尝试在 React 组件中呈现静态 CSS 代码示例，如下所示：

React.createClass({
  render: function() {
    return (
      <code> body { color: blue; } </code>
    )
  }
});

然而，这似乎不起作用。

我有什么特殊的方法可以像这样转义代码，还是我做错了什么？

Answer 1

@ColonelThirtyTwo 的回答可以解决问题：

<code>{"body { color: blue; }"}</code>

Answer 2

可能还值得注意的是，这也可以用多行字符串来完成：

<code>{`
  html { background: red; }
  body { color: blue; }
`}</code>

Answer 3

如果你想做多行，你必须按如下方式添加换行符。如果你不这样做，他们都会在同一条线上。

    <code>
      {`html { background: red; }`}<br/>
      {`body { color: blue; }`}<br/>
    </code>

How to embed literal <code> snippet within React/JSX component?