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

Posted 2023-02-25

【中文标题】目标容器不是 DOM 元素 - React 和 GatsbyJS - React-slick 组件

【英文标题】：Target container is not a DOM element - React and GatsbyJS - React-slick Component

【发布时间】：2018-03-13 05:32:32

【问题描述】：

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

未捕获（承诺中）错误：_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

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

【参考方案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

【讨论】：

干杯，这行得通。更好的是，我认为你教会了我一些东西。不知道我是怎么到现在都没有意识到这一点的。