Используйте <code> или похожие теги в ReactJS, используя JSX

Question

Я пытаюсь использовать ReactJS с JSX, чтобы создать доказательство концепции для руководства по стилю.

Я хотел иметь возможность отображать сырой HTML о том, как вызывать компоненты, делающие это. JSX игнорирует мой <code> теги и рендеринг компонента

Это то, что я пробовал до сих пор Показать HTML-код в HTML

<blockquote>
  <pre>
    <code>
      <VideoPlayer 
        ref="videoplayer" 
        preload={this.props.preload} 
        classes={this.props.classes} 
        videoID={this.props.videoID}
        controls="controls" 
      />     
    </code>
  </pre>
</blockquote>

Я был удивлен, увидев это.

Answer 1

Если вы хотите, чтобы этот код был буквальным блоком, вам нужно использовать JSX-безопасные символы, поэтому либо JSX-экранируйте все, либо используйте HTML-сущности там, где это возможно, а затем вам все еще нужно JSX-экранировать фигурные скобки (потому что они синтаксис шаблонов в JSX) и новые строки (да, эти новые строки также не являются JSX-безопасными. Пробельные символы свернуты во время преобразования JSX).

И вы, вероятно, хотите использовать <pre>, который является элементом уровня блока для форматированного текста, а не <code>, который встроен:

<pre>
  &lt;VideoPlayer{'\n'}
    ref="videoplayer"{'\n'}
    preload={'{'}this.props.preload{'}\n'}
    classes={'{'}this.props.classes{'}\n'}
    videoID={'{'}this.props.videoID{'}\n'}
    controls="controls"{'\n'}
  /&gt;</pre>

"Это так много работы, о_о", да, это так. Поэтому, как правило, вы не делаете это самостоятельно; если вы используете упаковщик, вы используете препроцессор (например, загрузчик блоков, если вы используете веб-пакет), или если вы не используете его, вы часто используете специальный компонент реагирования, который отображает текст дословно.

Answer 2

В вашем примере, response интерпретирует ваш код как JSX. Вам нужно использовать кодирование JSX-save. Самый простой - включить строковый литерал:

<pre>{`
  <VideoPlayer 
    ref="videoplayer" 
    preload={this.props.preload} 
    classes={this.props.classes} 
    videoID={this.props.videoID}
    controls="controls" 
  />
`}</pre>

Пояснение: парсинг вашего ввода начинается с <pre> в режиме JSX. Открывающая скобка { переключает анализатор в режим JavaScript для включения вычисленных значений в вывод. Теперь обратная цитата `переключает парсер в режим синтаксического анализа строк. Это может занимать несколько строк. Режим синтаксического анализа внутренней строки, специальные символы JSX <>{} больше не особенные. Но вы должны избегать двух символов, которые являются специальными внутри многострочных строк: обратная кавычка `и знак доллара $.

После разбора вашего кода, заключительная обратная кавычка переключается обратно в режим JavaScript, следующий } переключается обратно в режим JSX и </pre> завершает ваш элемент.

React автоматически преобразует вашу строку в безопасный HTML.