如何嵌入文字<code> snippet within React/JSX component?</code>

Question

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

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

然而，这似乎不起作用。

我是否有一些特殊的方式来逃避这样的代码，或者我做错了什么？

Answer 1

@ ColonelThirtyTow的答案就是诀窍：

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