Как импортировать html в React.js?

@urban_will Вы можете использовать require() и путь к html документу чтобы импортировать его в React.js и затем dangerouslySetInnerHTML чтобы отобразить его, включая html теги(имейте ввиду что это может быть опасно и только импортируйте html которые контролируются Вами, а не пользователи загружают его - т.к. документ может содержать вредоносный код), ниже пример кода на React.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import React from "react";
import ReactDOM from "react-dom";

// Путь к Вашему HTML документу
const html = require("./contact.html");

const Main = () => {
  return (
    <div>
      <p dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
};

class App extends React.Component {
  render() {
    return <Main />;
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

@urban_will 

Для импорта HTML-кода в React.js вы можете использовать опцию "dangerouslySetInnerHTML".

Например, если у вас есть HTML-код, который вы хотите отобразить внутри компонента React, вы можете использовать следующий код:

1
2
3
4
5
6
7

function MyComponent() {
  const myHtml = "<div><h1>Hello World!</h1></div>";

  return (
    <div dangerouslySetInnerHTML={{ __html: myHtml }} />
  );
}

Обратите внимание, что использование этой опции может быть опасным, так как она может привести к XSS-атакам (межсайтовый скриптинг), если HTML-код, который вы импортируете, содержит вредоносный код. Поэтому важно быть осторожным и проверять HTML-код перед его импортом в React.js.