Javascript 在react上导入其他文件上的html字符串。使用prismjs显示代码高亮显示

使用PRISMJ在设计系统中显示代码段

我想在一个独立的文件中分离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>
    )
  }
}

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

import React，{Component}来自'React'；
从“prismjs”导入Prism；
导入“/CodeSample.scss”；
导入“../Shared/prism.css”；
//导入单独的html文件
导入{html}'./htmlSnippet.jsx'；
类CodeSample扩展组件{
hasHtmlBlob（）{
返回(
const html = `
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>`

return html;


{html}//此处显示的任何html都将由prism突出显示

) } } render（）{ 返回(

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

return html;

{this.hasHtmlBlob（）} ) } } 要导出的HTML：

htmlSnippet.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>
    )
  }
}

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

const html=`

一,
二,
三,

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

return html;

您的代码中有两个问题：

JSX语法 您不应该将模板声明为字符串，而应该使用“react way”

---

您的代码中有两个问题：

JSX语法 您不应该将模板声明为字符串，而应该使用“react way”

---

当我试图显示{html}时，我遇到了问题。当我试图显示{html}时，它返回为[object]我遇到了问题。它返回为[对象]