Синтаксическая ошибка при отображении JavaScript в виде текста в React

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

оператор backquote (`) - это не текст или строка, это оператор, подобный функции JavaScript. Функция JavaScript должна быть внутри {} при использовании внутри JSX. поэтому вы должны написать, как показано ниже:

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

Answer 2

Вам просто нужно обернуть его в скобки:

{`
  import Calendar from './Calendar'

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

Answer 3

Многострочный код должен быть заключен в круглые скобки, и с использованием отличной от html разметки вам понадобится фигурная скобка для их анализа:

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

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

{/ * 1 * /}

Вместо использования скобок вы также можете использовать фигурные скобки и использовать оператор возврата, например:

  render = () => {
    return ( <div> {/* optional parentheses */}
     Optional, since it is in same line as return line
    </div>)
  }

Или, например:

  render = () => {
    return (  {/* required parentheses */}
      <div>
       Required, since it is in different line from return line
    </div>
   )
  }

it означал запуск html-разметки, как <div> в предыдущем примере.

{/ * 2 * /}

Использование фигурных скобок в предыдущем примере приведет к тому, что все будет как в шаблонном литерале, так и внутри строки. Обратите внимание, что если вы используете переменную типа ${some_var} внутри литерала шаблона, то это приведет к тому, что ее значение будет не таким, как есть. Если вы хотите в каком-то случае, просто уберите фигурную скобку, как $\{some_var}

Answer 4

    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>

}