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

Question

我正在构建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 做到这一点？

Answer 1

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

IE。

const NewComponent = () => {

const functions = () => {

}

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


   );
}

const styles = {
...css
}

export default NewComponent;

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

最好在根 div 标签 ( ) 下。

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

然后只需将您的 css 和 js 链接为 header 和页脚中的单独样式表/脚本。

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

希望能帮助到你： ）

[更新]

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

dangerouslySetInnerHTML Prop 如果你尝试直接在组件内渲染 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 字符串，然后再使用 dangerouslySetInnerHTML 属性将其注入 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