如何向React.js添加HTML组件轮播

Answer 1

您可以简单地将所有 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;

Answer 2

只需使用

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

时，您可以通过使用

materialize-css@next

和此 cmd

npm

 将 

npm install materialize-css@next

安装为依赖项来使用它

有关安装的更多信息可以在此处

找到

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

Answer 3

我看到您对许多正在使用依赖项的答案做出了回应。如果这是通过 CDN 实现的，您只需将其添加到公共文件夹中的 index.html 文件中，并在需要时使用您的依赖项。不过，我认为 Materialise 有一个可以安装的节点方面。