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

Question

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

4

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;

请问如何将HTML文件添加到JS文件中并通过JS文件运行HTML文件？我已经在HTML中使用Materialize制作了一个轮播图，但是我无法将其代码转换为JS代码。如果可能的话，请有人帮我将HTML文件转换为JS文件，或者告诉我如何在JS文件中导入HTML文件。

- Rank Jay

为什么不创建<Carousel/>组件并将所有必要的标记和依赖项放在那里呢？ - Yevhen Horbunkov

2个回答

2

只需使用react-create-app模板，基本的html（头部、元数据）就已经就位了。只需修改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，您可以在public目录中执行此操作。

编辑：（有关依赖项）

由于您使用了materialize-css，因此您可以通过使用以下命令在依赖项中安装materialize-css@next来使用它：npm install materialize-css@next

有关安装的更多信息，请单击此处

来源：https://materializecss.com/getting-started.html

- ezio4df

嗨，aXuser264，感谢您的回复，但我实际上正在使用一个名为“Materialize”的依赖项，您可以在我的HTML文件中看到它，文件名为<link>和<script>部分，在不将它们添加到js文件中的情况下，您确定这会起作用吗？ - Rank Jay

@RankJay 更新了问题，请查看并且如果有帮助请标记为答案。 - ezio4df

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fazal · Accepted Answer

你可以将所有的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;