Question

我正在尝试运行代码，但出现未捕获的不变变量：目标容器不是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;

未捕获的不变违反：目标容器不是Object.render

0 个答案: