Я пытаюсь запустить код, но получаю Неизученное нарушение инварианта: целевой контейнер не является элементом DOM. Ошибка.Я тестирую приведенный ниже код
В Slider.jsx
render() {
const { activeSlide, prevSlide, sliderReady } = this.state;
return (
<div className={classNames('slider', { 's--ready': sliderReady })}>
<p className="slider__top-heading">Travelers</p>
<div className="slider__slides">
{this.props.slides.map((slide, index) => (
<div
className={classNames('slider__slide', { 's--active': activeSlide === index, 's--prev': prevSlide === index })}
key={slide.city}
>
<div className="slider__slide-content">
<h3 className="slider__slide-subheading">{slide.country || slide.city}</h3>
<h2 className="slider__slide-heading">
{slide.city.split('').map(l => <span>{l}</span>)}
</h2>
<p className="slider__slide-readmore">read more</p>
</div>
<div className="slider__slide-parts">
{[...Array(this.IMAGE_PARTS).fill()].map((x, i) => (
<div className="slider__slide-part" key={i}>
<div className="slider__slide-part-inner" style={{ backgroundImage: `url(${slide.img})` }} />
</div>
))}
</div>
</div>
))}
</div>
<div className="slider__control" onClick={() => this.changeSlides(-1)} />
<div className="slider__control slider__control--right" onClick={() => this.changeSlides(1)} />
</div>
);
}
}
const slides = [
{
city: 'Paris',
country: 'France',
img: require('assets/images/img4.jpg'),
},
{
city: 'Banglore',
country: 'India',
img: require('assets/images/img5.jpg'),
},
];
ReactDOM.render(<Slider slides={slides} />, document.querySelector('#root'));
В INDEX.js
ReactDOM.render(
<App>
<Router history={hist}>
<Switch>
<Route path="/" component={Components} />
</Switch>
</Router>
</App>
, document.getElementById("root"));
В index.html
<body>
<div id="root"></div>
<script src="bundle.js" type="text/javascript"></script>
</body>
В App.js
function App() {
return (
<div className="App">
<Router history={hist}>
<Switch>
<Route path="/" component={Components} />
</Switch>
</Router>
<Slider/>
</div>
);
}
export default App;
Отображается ошибка: Неизученный инвариантНарушение: целевой контейнер не является элементом DOM.в инварианте (http://localhost:3000/static/js/1.chunk.js:225988:19) в Object.render (http://localhost:3000/static/js/1.chunk.js:248161:40) в Module ../ src / index.js (http://localhost:3000/static/js/main.chunk.js:3170:50) в webpack_require (http://localhost:3000/static/js/bundle.js:782:30) в Object.0 (http://localhost:3000/static/js/main.chunk.js:3715:18) в webpack_require (http://localhost:3000/static/js/bundle.js:782:30) в checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23) в Array.webpackJsonpCallback [как push] (http://localhost:3000/static/js/bundle.js:33:19)