微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在erb视图中预渲染带有react-rails的组件时,元素类型无效

如何解决在erb视图中预渲染带有react-rails的组件时,元素类型无效

我在javascript / components / cardlist /文件夹中包含以下两个组件,该组件正尝试在Rails 5.1.7的erb视图中呈现

CardList.js

import React from "react"
import PropTypes from "prop-types"
import CardBlock from './CardBlock'

class CardList extends React.Component {
  render () {
    const allCards = this.props.all_cards.map((card,index) => (
      <CardBlock
        key={card.id}
        name={card.card_name}
      />
    ));

    return (
      <React.Fragment>
        {allCards}
      </React.Fragment>
    );
  }
}

CardList.propTypes = {
  all_cards: PropTypes.array
};

export default CardList

在同一文件夹中有卡片块,外观如下:

CardBlock.js

import React from "react"
import PropTypes from "prop-types"

class CardBlock extends React.Component {
  render () {
    return (
      <React.Fragment>
          <p>trial</p> 
      </React.Fragment>
    );
  }
}

CardList.propTypes = {
  listing_name: PropTypes.string
};

export default CardBlock

我有意见

<%= react_component("cardlist/cardlist",{ all_cards: @all_cards },{prerender: true}) %>

CardList组件中的行import CardBlock from './CardBlock' 给了我这个错误

Encountered error "#<ExecJS::ProgramError: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in,or you might have mixed up default and named imports.>" when prerendering cardlist/CardList with

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。