如何在 React 应用程序中使用 HTML 和 JS 导出组件

如何解决如何在 React 应用程序中使用 HTML 和 JS 导出组件

我正在构建 MERN 项目，在 react 部分我得到了：

- src/
  - components/
    - AdminPage/
      - admin-page.html
      - admin-page.css
      - admin-page.js

所以问题出在 App.js:
我怎么能使用常规的 html、css、js 而不是在 <AdminPage/> 组件中反应：

import React from 'react';
import { browserRouter as Router,Switch,Route } from 'react-router-dom';

import HomePage from './components/HomePage/HomePage.component';
import LoginPage from '../src/components/LoginPage/LoginPage.component';
import RegisterPage from '../src/components/RegisterPage/RegisterPage.component';
import UserPage from '../src/components/UserPage/UserPage.component';
import AdminPage from '../src/components/AdminPage/AdminPage.component';

有没有办法不使用经典的方式，比如 AdminPage.component.jsx 并从那里导出组件； 我怎么能用普通的 html、css 和 js 来做到这一点？

解决方法

我假设您不想考虑功能组件，因为在 html/css/js 中维护了一些无法轻松重构为 React 的内容：

即。


const NewComponent = () => {

const functions = () => {

}

   return (
     <div style={styles} ></div>


   );
}

const styles = {
...css
}

export default NewComponent;

那么我会说您最好的解决方案是将 admin-page.html 中的 html 正文粘贴到您的 index.html 文件中。

最好在根 div 标签 ( ) 下。

这将显示在您所有的 React 代码下（就像页脚一样），但您可以使用类名或 id 在某些条件下显示/隐藏页面。

然后将您的 css 和 js 作为单独的样式表/脚本链接到页眉和页脚中。

我强烈建议不要这样做，因为它很可能会增加您对项目的技术债务。

希望有帮助:)

[更新]

默认情况下，由于包括跨站点脚本在内的各种原因，React 不允许您在组件中注入 HTML。但是，对于 CMS 或 WYSIWYG 编辑器等某些情况，您必须处理原始 HTML。在本指南中，您将了解如何在组件中嵌入原始 HTML。

dangerouslySetInnerHTML 道具如果您尝试直接在组件内呈现 HTML 字符串，React 会自动对其进行清理并将其呈现为纯字符串。

好的，如果您只想添加完整的 200 多行 HTML / JS，我想说您可以将它们导入到具有危险 SetHTML 属性的组件中。像这样：

const HTML = import('../the/file/path/to/the.html');
const JS = import('../the/file/path/to/the.js');

const newComponent = () => {
return (
    `<div dangerouslySetInnerHTML={{ __html: myHTML }} />;`
    )

}

或者，如果您想要一个更安全的解决方案，您可以使用 dompurify：

如果 XSS 是主要问题，您可以使用像 DOMPurify 这样的外部库来清理 HTML 字符串，然后使用危险的 SetInnerHTML 道具将其注入到 DOM 中。

要安装 DOMPurify 库，请运行以下命令。

npm i dompurify

您可以在下面看到示例用法。

import DOMPurify from "dompurify";

const myHTML = `<h1>John Doe</h1>`;

const mySafeHTML = DOMPurify.sanitize(myHTML);

const App = () => <div dangerouslySetInnerHTML={{ __html: mySafeHTML }} />;

您还可以将 DOMPurify 配置为仅允许特定标签和属性。

// ...
const mySafeHTML = DOMPurify.sanitize(myHTML,{
  ALLOWED_TAGS: ["h1","p","span"],ALLOWED_ATTR: ["style"],});
// ...

非常感谢 Gaurav Singhal 撰写的这篇精彩文章：

https://www.pluralsight.com/guides/how-to-use-static-html-with-react