Почему мое слайд-шоу не работает в приложении React? - PullRequest
Новая
       27

Почему мое слайд-шоу не работает в приложении React?

0 голосов
/ 08 января 2019

Я импортировал w3.css в свое приложение React, и я пытаюсь создать слайд-шоу с 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 и сделал несколько изменений, которые, как я думал, требовались в моем приложении. Я приложил ошибку, которую я получаю на странице локального хоста. Свойство style ожидает сопоставления свойств стиля со значениями, а не со строкой. Например, style = {{marginRight: spacing + 'em'}} при использовании JSX.

1 Ответ

0 голосов
/ 08 января 2019

изменение 

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

до 

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