问题描述
我正在构建 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