为什么我的幻灯片在我的 React 应用程序中不起作用？

Question

我已经在我的 React 应用程序中导入了 w3.css，我正在尝试在与正在呈现的组件相同的目录中创建一个包含 3 张图像的幻灯片。我是 React 的新手（通常也是网络开发）并且正在努力设计我的应用程序。 Home.jsx

代码

import React, { Component } from "react";
import "w3-css/w3.css";

export default class Home extends Component {
 render() {
  return (
   <div className="w3-container">
    <div className="w3-content w3-display-container">
     <img className="mySlides" src={"./1.jpg"} />
     <img className="mySlides" src={"./2.jpg"} />
     <img className="mySlides" src={"./3.jpg"} />
     <div
      className="w3-center w3-display-bottommiddle"
      style="width:100%"
     >
      <div className="w3-left" onclick="plusDivs(-1)">
       &#10094;
      </div>
      <div className="w3-right" onclick="plusDivs(1)">
       &#10095;
      </div>
      <span
       className="w3-badge demo w3-border"
       onclick="currentDiv(1)"
      />
      <span
       className="w3-badge demo w3-border"
       onclick="currentDiv(2)"
      />
      <span
       className="w3-badge demo w3-border"
       onclick="currentDiv(3)"
      />
     </div>
    </div>
   </div>
  );
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我不确定我哪里出错了。我按照此处的说明 - https://www.w3schools.com/w3css/w3css_slideshow.asp 进行了一些我认为需要在我的应用程序中进行的更改。我附上了我在本地主机页面上遇到的错误。 The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

Answer 1

改变

<div
    className="w3-center w3-display-bottommiddle"
    style="width:100%"
>

至

<div
    className="w3-center w3-display-bottommiddle"
    style={{width:"100%"}}
>

为什么我的幻灯片在我的 React 应用程序中不起作用？

Why is my slideshow not working in my React app?

javascript

css

reactjs

w3-css