React - 元素類型無效：需要字符串或類/函數但得到：object

Question

我正在我的應用程序中實現react-items-carousel 。

我試圖在我的應用程序中配置一個演示示例。

這是演示代碼

import React from 'react';
import range from 'lodash/range';
import styled from 'styled-components';
import ItemsCarousel from 'react-items-carousel;

const noOfItems = 12;
const noOfCards = 3;
const autoPlayDelay = 2000;
const chevronWidth = 40;

const Wrapper = styled.div`
  padding: 0 ${chevronWidth}px;
  max-width: 1000px;
  margin: 0 auto;
`;

const SlideItem = styled.div`
  height: 200px;
  background: #EEE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
`;

const carouselItems = range(noOfItems).map(index => (
  <SlideItem key={index}>
    {index+1}
  </SlideItem>
));

export default class App extends React.Component {
  state = {
    activeItemIndex: 0,
  };

  componentDidMount() {
    this.interval = setInterval(this.tick, autoPlayDelay);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  tick = () => this.setState(prevState => ({
    activeItemIndex: (prevState.activeItemIndex + 1) % (noOfItems-noOfCards + 1),
  }));

  onChange = value => this.setState({ activeItemIndex: value });

  render() {
    return (
      <Wrapper>
        <ItemsCarousel
          gutter={12}
          numberOfCards={noOfCards}
          activeItemIndex={this.state.activeItemIndex}
          requestToChangeActive={this.onChange}
          rightChevron={<button>{'>'}</button>}
          leftChevron={<button>{'<'}</button>}
          chevronWidth={chevronWidth}
          outsideChevron
          children={carouselItems}
        />
      </Wrapper>
    );
  }
}

唯一不同的是我變了

import ItemsCarousel from '../../src/ItemsCarousel';

至

import ItemsCarousel from 'react-items-carousel';

我已經調用了組件App而不是AutoPlayCarousel

目前在終端中，應用程序已成功編譯，但在瀏覽器中我看到以下錯誤

元素類型無效：需要一個字符串（對於內置組件）或一個類/函數（對於復合組件），但得到：object。 檢查App的渲染方法。

看截圖

我在許多線程中看到這個錯誤的原因可能是多種多樣的，你能找出我的問題以及我做錯了什么嗎？

Answer 1

嘗試提供carouselItems作為子元素

<Wrapper>
  <ItemsCarousel
    gutter={12}
    numberOfCards={noOfCards}
    activeItemIndex={this.state.activeItemIndex}
    requestToChangeActive={this.onChange}
    rightChevron={<button>{'>'}</button>}
    leftChevron={<button>{'<'}</button>}
    chevronWidth={chevronWidth}
    outsideChevron>

    {carouselItems}

  </ItemsCarousel>
</Wrapper>

Answer 2

我不得不更新到"react-dom": "^16.3.0"