如何将 HTML 组件添加到 React.js
Posted
技术标签:
【中文标题】如何将 HTML 组件添加到 React.js【英文标题】：How to add HTML component to React.js 【发布时间】：2020-10-28 17:31:00 【问题描述】：App.html
<!DOCTYPE html>
<html>
<head>
<title>Carousel</title>
<link rel="stylesheet" type="text/css" href="./css/materialize.min.css">
</link>
<link rel="stylesheet" type="text/css" href="App.css">
</link>
</head>
<div class="carousel">
<div class="carousel-item">
<img src=require("./1.png") class="responsive-img"></img>
</div>
<div class="carousel-item">
<img src=require("./2.png") class="responsive-img"></img>
</div>
<div class="carousel-item">
<img src=require("./3.png") class="responsive-img"></img>
</div>
<script src="./js/materialize.min.js"></script>
<script>
const small = document.querySelector('.carousel');
var inst = M.Carousel.init(small, );
inst.dist(50);
</script>
</div>
</html>
App.js
import React from 'react';
var perf = require('./App.html');
class App extends React.Component
render()
return (
<div dangerouslySetInnerHTML= __html: perf ></div>
);
export default App;
有人可以帮助我如何在我的 JS 文件中添加 HTML 文件并通过我的 JS 文件运行 HTML 文件。我已经使用 HTML 中的物化制作了一个轮播，但是我无法在 JS 中编写代码，因此，如果可能的话，有人可以帮助我将 HTML 文件转换为 JS 文件，或者如何导入 HTML 文件在我的 JS 文件中。
【问题讨论】：
为什么不创建<Carousel/> 组件并将所有必要的标记和依赖项放在那里？
【参考方案1】：
只需使用react-create-app 模板和基本的html (head, meta) 东西已经到位，只需修改src 目录以满足您的需求。
例如index.js 是这样的，
import React from 'react';
import './App.css'; // For Your CSS file
class App extends React.Component
render()
return (
<div class="carousel">
<div class="carousel-item">
<img src=require("./1.png") class="responsive-img"></img>
</div>
<div class="carousel-item">
<img src=require("./2.png") class="responsive-img"></img>
</div>
<div class="carousel-item">
<img src=require("./3.png") class="responsive-img"></img>
</div>
);
export default App;
如果您需要更改基础html，您可以在公共目录中进行。
编辑：（对于依赖项）
当您使用materialize-css 时，您可以通过使用npm 和此cmd npm install materialize-css@next 安装materialize-css@next 作为依赖项来使用它
有关安装的更多信息可以找到here
来源：https://materializecss.com/getting-started.html
【讨论】：
嗨 aXuser264，感谢您的回复，但我实际上使用了一个名为“Materialize”的依赖项，您可以在我的 HTML、名为 的文件和 @RankJay 更新了问题，查看 && 如果有帮助请标记为答案【参考方案2】：您可以简单地将所有的 html 代码插入到 App.js 文件中，reactjs 不需要任何 .html 文件。只需按照下面的代码，希望你能理解它。 我只是将所有 HTML 代码放入 App.js 的父 div 中。
import React from 'react';
var perf =require('./App.html');
class App extends React.Component
render()
return (
<div>
<div class="carousel">
<div class="carousel-item">
<img src=require("./1.png") class="responsive-img"></img>
</div>
<div class="carousel-item">
<img src=require("./2.png") class="responsive-img"></img>
</div>
<div class="carousel-item">
<img src=require("./3.png") class="responsive-img"></img>
</div>
</div>
</div>
);
export default App;
【讨论】：
您好 Fazal，感谢您的回复，但我实际上使用了一个名为“Materialize”的依赖项，您可以在我的 HTML、名为 的文件和 为此您必须添加“Materialize”的依赖包。添加此软件包后，我确信它会起作用。以上是关于如何将 HTML 组件添加到 React.js的主要内容，如果未能解决你的问题，请参考以下文章