[英]Target container is not a DOM element.(Carousel using ant design in react js)
目标容器不是DOM元素。目标容器不是DOM元素。目标容器不是DOM元素。
第一部分和应用程序类第一部分是我创建轮播的地方,但是当我启动服务器时,它一直给我一个错误。Target容器不是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;
因为这个,
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.