目标容器不是 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";  //Import here

class App extends Component {

   render() {

     return (

        <div className="App">

           <CriaCarousel />

        </div>

     );

   }

}

ReactDOM.render(<App />, document.getElementById('root')) //This will render on actual DOM

你的子组件应该是，

class CriaCarousel extends Component {

  render() {

    return (

      <Carousel autoplay="true">

        //<CarouselStyle>    //I am not sure what is this doing, but I think you don't need it

          <div>

            <h3>1</h3>

          </div>

          <div>

            <h3>2</h3>

          </div>

          <div>

            <h3>3</h3>

          </div>

          <div>

            <h3>4</h3>

          </div>

       // </CarouselStyle>

      </Carousel>

    );

  }

}

而这CSS将是这个，

.ant-carousel .slick-slide {

  text-align: center;

  height: 160px;

  line-height: 160px;

  background: #364d79;

  overflow: hidden;

}

.ant-carousel .slick-slide h3 {

  color: #fff;

}