如何将 HTML 组件添加到 React.js答案

【问题标题】：How to add HTML component to React.js如何将 HTML 组件添加到 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/> 组件并将所有必要的标记和依赖项放在那里？

标签： javascript html node.js reactjs

【解决方案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”的依赖包。添加此软件包后，我确信它会起作用。