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

Question

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

Uncaught (in promise) Error: _registerComponent(...): Target container is not a DOM element.

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

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

Answer 1

你的组件名称 featuresCarousel 应该是大写 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

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

Target container is not a DOM element - React and GatsbyJS - React-slick Component

javascript

reactjs

slick.js

react-slick

gatsby