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

【问题标题】：Why is my slideshow not working in my React app?为什么我的幻灯片在我的 React 应用程序中不起作用？
【发布时间】：2019-06-02 21:03:59
【问题描述】：

我已经在我的 React 应用程序中导入了 w3.css，我正在尝试在与正在渲染的组件相同的目录中创建一个包含 3 个图像的幻灯片。我是 React 的新手（也是一般的 Web 开发），并且正在为我的应用程序设计样式而苦苦挣扎。 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.

【问题讨论】：

标签： javascript css reactjs w3-css

【解决方案1】：

改变

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

到

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

【讨论】：

谢谢，noob jsx 错误：P 我现在遇到另一个问题。即使路径正确，我的图像也没有显示。（与 Home.jsx 在同一目录中）