Синтаксическая ошибка при отображении JavaScript в виде текста в React
Я пишу некоторую документацию в 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: '[email protected]' }]
}
`
</div>
</div>
}
Я пробовал как с обратным тиком, так и без него, но все равно получаю ту же синтаксическую ошибку:
Module build failed: Syntax Error: Unexpected token, expected }
ссылка на толстую кишку сразу после api_key. Есть ли способ сделать это, или мне лучше выбрать другой подход.
@rlemon, мне нужно беспокоиться о том, что парсер анализирует его как JS?
нет, это то, что делает литерал шаблона. превращая его в строку. но без указания парсеру обрабатывать что как JS, это просто произвольные обратные кавычки. просто не включайте туда никаких упаковок ${}. или экранируйте его внутри строки.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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: '[email protected]' }]
}
`}
</div>
</div>
}
Вам просто нужно заключить его в скобки:
{`
import Calendar from './Calendar'
const config = {
api_key: 1234,
calendars: [{ name: 'demo', url: '[email protected]' }]
}
`}
Многострочный код следует заключать в круглые скобки и использовать разметку, отличную от 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: '[email protected]' }]
}
`
}
</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>
)
}
Это означает запуск HTML-разметки, такой как <div> в предыдущем примере.
{/ * 2 * /}
Использование фигурной скобки в предыдущем примере приведет к тому, что все заключено в литерал шаблона или внутри строки. Обратите внимание, что если вы используете переменную типа ${some_var} внутри литерала шаблона, это приведет к тому, что ее значение будет не таким, как оно есть. Если вы хотите в каком-то случае, просто избегайте фигурной скобки, например $\{some_var}
Оператор 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: '[email protected]' }]
}
`}
</div>
</div>
}
попробуйте обернуть его
{``}, прямо сейчас синтаксический анализатор не понимает, что следует экранировать в фактический JS, а что такое строка в JSX