0

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

未捕获（承诺中）错误：_registerComponent(...)：目标容器不是 DOM 元素。

特征Carousel.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 的了解是有限的而且非常新。

4

1 回答 1

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')
);

工作演示

于 2018-03-13T07:24:25.173 回答