在反應jsx中顯示html標記

Question

想在我的模板中直接顯示html標記。

這是我要編寫的html代碼我要顯示的文件。 我想顯示所有的html元素。

import React from 'react';

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

export default html

組件文件

import React, { Component } from 'react';
import html from './code/htmlCodeSnippet';

...
  render() {
    return (
      <div>
        {html}
      </div>
    )
  }
}

我正在導入要在我的組件中顯示的html文件。 我將使用html熒光筆來顯示代碼。

每當我引用{html} ，它都不會顯示所有的html元素。 它只是顯示為

1
2
3

Answer 1

你需要做一些改變。 首先將html更改為字符串即

const html = `
   <div>
      <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
      </ul>
      <p>hello</p>
  </div>`;

並使用pre和code元素將html包裝在render方法中

<pre><code>{html}</code></pre>