目标容器不是 DOM 元素。

Question

primeira parte ea classe app a outra parte é onde eu crio meu carousel, mas ele fica dando erro quando eu inicio o servidor 目标容器不是 DOM 元素。

第一部分和应用程序类另一部分是我创建轮播的地方，但是当我启动服务器时它一直给我一个错误目标容器不是 DOM 元素。

    import React, { Component } from "react";

    import "./styles.css";

    //import Header from "./components/Header/index";

    //import CriaCarousel from "./components/Carrousel/CriaCarousel";

    // import { Carousel } from "antd";

    // import { CarouselStyle } from "./components/Carrousel/styles";

    import CriaCarousel from "./components/Carrousel/CriaCarousel";

    class App extends Component {

      render() {

        return (

          <div className="App">

            <CriaCarousel />

          </div>

        );

      }

    }

    export default App;

import React, { Component } from "react";

//import ReactDOM from "react-dom";

//import { Settings } from "react-slick";

import ReactDOM from "react-dom";

import "antd/dist/antd.css";

import { Carousel } from "antd";

//import "./styles.js";

import { CarouselStyle } from "./styles";

class CriaCarousel extends Component {

  render() {

    return ReactDOM.render(

      <Carousel autoplay="true">

        <CarouselStyle>

          <div>

            <h3>1</h3>

          </div>

          <div>

            <h3>2</h3>

          </div>

          <div>

            <h3>3</h3>

          </div>

          <div>

            <h3>4</h3>

          </div>

        </CarouselStyle>

      </Carousel>

    );

  }

}

export default CriaCarousel;

Answer 1

正因为如此，return ReactDOM.render( ... )你不能从你的组件返回它。相反，您需要将最顶层的组件 (App.js) 渲染到 dom。阅读更多关于ReactDOM 这里import ReactDOM from "react-dom";&nbsp; //Import hereclass App extends Component {&nbsp; &nbsp;render() {&nbsp; &nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<CriaCarousel />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;);&nbsp; &nbsp;}}ReactDOM.render(<App />, document.getElementById('root')) //This will render on actual DOM你的子组件应该是，class CriaCarousel extends Component {&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <Carousel autoplay="true">&nbsp; &nbsp; &nbsp; &nbsp; //<CarouselStyle>&nbsp; &nbsp; //I am not sure what is this doing, but I think you don't need it&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>1</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>2</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>3</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>4</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;// </CarouselStyle>&nbsp; &nbsp; &nbsp; </Carousel>&nbsp; &nbsp; );&nbsp; }}而这CSS将是这个，.ant-carousel .slick-slide {&nbsp; text-align: center;&nbsp; height: 160px;&nbsp; line-height: 160px;&nbsp; background: #364d79;&nbsp; overflow: hidden;}.ant-carousel .slick-slide h3 {&nbsp; color: #fff;}