React - 元素类型无效：期望字符串或类/函数但得到：对象答案

【问题标题】：React - Element type is invalid: expected a string or a class/function but got: objectReact - 元素类型无效：期望字符串或类/函数但得到：对象
【发布时间】：2020-03-11 13:14:32
【问题描述】：

我正在我的应用程序中实现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的渲染方法。

看截图

我在很多帖子中看到这个错误的原因可能是多种多样的，你能找出我的问题以及我做错了什么吗？

【问题讨论】：

你可以试试import { ItemsCarousel } from 'react-items-carousel
我试过了，错误还是一样，唯一的区别是控制台指向我在 index.js 第 9 行，我有 ReactDOM.render(, document.getElementById ('root'));
您的代码按预期工作：codesandbox.io/s/happy-glade-k979j
它单独工作，但当我在我的应用程序中实现时则不然

标签： javascript reactjs create-react-app

【解决方案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>

【讨论】：

【解决方案2】：

我必须更新到"react-dom": "^16.3.0"

【讨论】：