javascript - 为什么我的幻灯片在我的 React 应用程序中不起作用?
问题描述
我已经在我的 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)">
❮
</div>
<div className="w3-right" onclick="plusDivs(1)">
❯
</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并按照我认为我的应用程序需要进行了一些更改。我附上了我在本地主机页面上遇到的错误。
prop 需要从样式属性到值的style
映射,而不是字符串。例如,使用 JSX 时 style={{marginRight: spacing + 'em'}}。
解决方案
改变
<div
className="w3-center w3-display-bottommiddle"
style="width:100%"
>
至
<div
className="w3-center w3-display-bottommiddle"
style={{width:"100%"}}
>
推荐阅读
- r - 合并多个数据集并按 id 排序
- java - 带角度参数的文件上传
- mysql - 带有自签名证书的 SSL 连接到 MySQL 的 Keycloak
- amazon-web-services - CloudFormation 正在等待清理与 Lambda 函数关联的 NetworkInterfaces
- mongodb - 使用身份验证恢复 mongo
- java - 为什么我的命令提示符显示没有输入字符?
- angular - Angular HTTP POST 请求抛出 net::ERR_HTTP2_PROTOCOL_ERROR 错误
- javascript - 如何将 JSON 值发送到 FullCalendar 并在日历中显示事件
- javascript - 在不活动时运行脚本#Javascript #Android
- sql - AWS RDS Postgres:设备上没有剩余空间