javascript - 在 React 中将 JavaScript 渲染为文本的语法错误

Question

我正在用 React 编写一些文档，当我尝试在渲染函数中编写 JavaScript 时遇到语法错误。我不确定这是解决方法的安全问题还是实际上是解析器问题:

export default class Docs extends Component {
  render = () =>
    <div>
      <h1>Example:</h1>
      <div className={styles['code-block']}>
        `
        import Calendar from './Calendar'

        const config = {
          api_key: 1234,
          calendars: [{ name: 'demo', url: 'example@group.calendar.google.com' }]
        }
        `
      </div>
    </div>
 }

我试过有反勾和没有反勾，但仍然得到相同的语法错误:

Module build failed: Syntax Error: Unexpected token, expected }

在 api_key 之后引用冒号。有没有办法做到这一点，还是我最好采用不同的方法。

Answer 1

    export default class Docs extends Component {
  render = () =>
    <div>
      <h1>Example:</h1>
      <div className={styles['code-block']}>
        {`
        import Calendar from './Calendar'

        const config = {
          api_key: 1234,
          calendars: [{ name: 'demo', url: 'example@group.calendar.google.com' }]
        }
        `}
      </div>
    </div>

}