javascript - 目标容器不是DOM元素。(在react js中使用ant设计的轮播)

Question

primeira 是一款经典应用程序 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 的更多信息 here

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;
}

Demo