Question

primeira parte e a classe app 外部轮播，马斯·菲利卡·丹多·埃罗·坎多·乌纳维乌斯·卡维塞尔目标容器不是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

目标容器不是DOM元素。（轮播在react js中使用蚂蚁设计）

1 个答案: