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

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

Answer 2

尝试提供carouselItemsas 子元素<Wrapper>&nbsp; <ItemsCarousel&nbsp; &nbsp; gutter={12}&nbsp; &nbsp; numberOfCards={noOfCards}&nbsp; &nbsp; activeItemIndex={this.state.activeItemIndex}&nbsp; &nbsp; requestToChangeActive={this.onChange}&nbsp; &nbsp; rightChevron={<button>{'>'}</button>}&nbsp; &nbsp; leftChevron={<button>{'<'}</button>}&nbsp; &nbsp; chevronWidth={chevronWidth}&nbsp; &nbsp; outsideChevron>&nbsp; &nbsp; {carouselItems}&nbsp; </ItemsCarousel></Wrapper>