React-元素类型无效：应该是字符串或类/函数，但得到了：对象

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

此刻，在终端中成功编译了应用程序，但是在浏览器中我看到了以下错误

元素类型无效：应使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。 检查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"