Импортируйте строку html в другой файл при реагировании. Использование prismjs для отображения подсветки кода - PullRequest
Новая
       21

Импортируйте строку html в другой файл при реагировании. Использование prismjs для отображения подсветки кода

0 голосов
/ 27 марта 2019

Использование Prismjs для отображения фрагментов кода в системе проектирования.

Я хочу отделить образец HTML-кода в отдельном файле и импортировать его в свой компонент.

Пример кода компонента:

CodeSampleContainer.jsx 

import React, { Component } from 'react';
import Prism from "prismjs";
import './CodeSample.scss';
import '../Shared/prism.css';

// Import separate html file
import { html } './htmlSnippet.jsx';

class CodeSample extends Component {
  hasHtmlBlob() {
    return (
      <pre>
        <code className="language-html">
          {html} // Any html displayed here will be highlighted by prism
) } } render () { вернуть (
{This.hasHtmlBlob ()}
) } }

HTML, который я хочу экспортировать:

htmlSnippet.jsx 

const html = `
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>`

return html;

1 Ответ

1 голос
/ 27 марта 2019

В вашем коде есть две проблемы:

Синтаксис JSX

Вместо того, чтобы объявлять ваш шаблон как строку, вы должны сделать это «по реакции» 

const html = (
    <div>
        <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
        </ul>
    </div>
);

Экспорт отсутствует

Если вы хотите экспортировать свой шаблон из htmlSnippet.jsx, вы должны использовать export, а не return. 

export { html };
...