目标容器不是DOM元素 - React和GatsbyJS - React-slick Component

时间:2018-03-13 05:32:32

标签: javascript reactjs slick.js gatsby react-slick

我正在尝试使用React-Slick轮播组件,但在将其显示在应用中并收到此错误时会遇到问题......

  

Uncaught(在promise中)错误:_registerComponent(...):目标容器不是DOM元素。

featuresCarousel.js

import React from "react";
import ReactDOM from "react-dom";
import { render } from "react-dom";
import Slider from 'react-slick';


class featuresCarousel extends React.Component{
  render() {
    const settings = {
      autoplay: true
    }
    return (
      <div className='container'>
        <Slider {...settings}>
          <div>Test</div>
          <div>Test2</div>
          <div>Test3</div>
        </Slider>
      </div>
    );
  }
};

ReactDOM.render(
  <featuresCarousel />,
  document.getElementById('container')
);

应显示在页面部分 3-section.js 中,然后显示在页面中。

import React from 'react'
import featuresCarousel from '../home/featuresCarousel'

const SectionThree = (props) => (
    <div>
        <featuresCarousel />
    </div>
)

export default SectionThree

不确定它是否会有所作为,但我也在使用GatsbyJS GatsbyJs,而且我对React的了解有限且非常新。

1 个答案:

答案 0 :(得分:1)

您的组件名称featuresCarousel应位于UpperCase FeaturesCarousel

class FeaturesCarousel extends React.Component{
  render() {
    const settings = {
      autoplay: true
    }
    return (
      <div className='container'>
        <Slider {...settings}>
          <div>Test</div>
          <div>Test2</div>
          <div>Test3</div>
        </Slider>
      </div>
    );
  }
};

const SectionThree = (props) => (
    <div className="SectionThree">
        <FeaturesCarousel />
    </div>
)

export default SectionThree

ReactDOM.render(
  <SectionThree />,
  document.getElementById('root')
);

Working Demo