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

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>