Блог

Использование 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
        </code>
      </pre>
      )
    }
  }

  render() {
    return (
      <div className="CodeSample"> 
        {this.hasHtmlBlob()}
      </div>
    )
  }
}
  

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

htmlSnippet.jsx

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

return html;
  

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

Синтаксис JSX

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

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

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

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

 export { html };