繁体   English   中英

React - 元素类型无效:预期是字符串或类/函数,但得到:对象

React - Element type is invalid: expected a string or a class/function but got: object

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

看截图在此处输入图片说明

我在许多线程中看到此错误的原因可能多种多样,您能找出我的问题以及我做错了什么吗?

2 个回复

尝试提供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>

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

2 元素类型无效:应为字符串或类/函数,但已获得对象

我有一个React应用,并且在呈现登录页面时遇到问题。 我已将其切碎为重新创建它所需的最低限度: App.js LoginPage.jsx 当我尝试运行该应用程序时,出现以下错误: “元素类型无效:期望使用字符串(对于内置组件)或类/函数(对于复合组件),但得到:对 ...

2019-02-10 16:46:21 0 209   reactjs
6 BottomTabNavigation:元素类型无效:预期是字符串或类/函数,但得到:对象

我正在尝试测试我的应用程序,但无法使导航正常工作。 当我测试导航以转到bottomtabnavigator时出现错误: 错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:对象。 这只是一个语法错误吗? 感谢您的任何帮助。 应用程序.js 堆栈导航器: ...

7 创建React Native应用程序时出错:元素类型无效:预期为字符串或类/函数,但得到了:对象

这似乎是一个以前提出的问题,但是到目前为止,我遇到的每个解决方案都是我的代码中已有的东西,或者是解决比我自己的代码库复杂得多的代码库的问题。 我要做的就是从React Native CLI生成的启动程序代码为我的应用程序创建一个中央入口点。 这是我到目前为止的内容: index.ios ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM