时间戳

首页 > 解决方案 > 如何将 HTML 组件添加到 React.js

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

问题描述

应用程序.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>

应用程序.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 文件中。

标签： javascripthtmlnode.jsreactjs

解决方案

只需使用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，您可以在公共目录中进行。

编辑：（对于依赖项）

当您使用materialize-css时，您可以通过使用此 cmdmaterialize-css@next作为依赖项安装来使用它npmnpm install materialize-css@next

更多关于安装的信息可以在这里找到

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

推荐阅读