Question

我有一个Rails应用，我想使用React组件使它看起来更好。我想使用名为autoresponsive-react的{{3}}，但是它不会渲染组件，因为它坚持未定义名为AutoResponsiveGrid的组件。我使用了其他的React库，但是这给我带来了很多麻烦。

我使用以下命令安装了它告诉我的库：

npm i autoresponsive-react --save-dev

但是，当我尝试使用Rails react_component函数调用React组件时，它告诉了我AutoResponsiveGrid is not defined。

我的package-lock.json：

 . . . 
    "autoresponsive-core": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/autoresponsive-core/-/autoresponsive-core-1.0.1.tgz",
      "integrity": "sha512-sNmRjQWslRJFOHRF7tEtqHU4MH4FDHN46vYdScfYRctSkCc4Ksqs5jKiDRXkFIdSJ4XWWcboq92567S74IKFSQ==",
      "dev": true
    },
    "autoresponsive-react": {
      "version": "1.1.31",
      "resolved": "https://registry.npmjs.org/autoresponsive-react/-/autoresponsive-react-1.1.31.tgz",
      "integrity": "sha512-aHzbT8Zr5Aaj0uQ6Zbf5552ojwTrfc3smOr8QW2ng9iAB6UxGRyYBg3jAvsezICzvLlmFk0g+n3i0px8SUS3Vw==",
      "dev": true,
      "requires": {
        "autoresponsive-core": "^1.0.1",
        "exenv": "^1.2.0"
      }
    },
 . . .

我的package.json：

{
  "name": "sample_app",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "@rails/webpacker": "^4.0.7",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-circular-progressbar": "^2.0.1",
    "react-dom": "^16.8.6",
    "react_ujs": "^2.5.0"
  },
  "devDependencies": {
    "autoresponsive-react": "^1.1.31",
    "typescript": "^3.5.3",
    "webpack-dev-server": "^3.7.2"
  }
}

我的progress.html.erb：

<!DOCTYPE html>
<html>
    <head>
    yaeoiajsdlfjadlskfjadlksjf
    </head>
    <body>
        <%-# Responsive Grid Here -%>
        <div>
            <%= react_component("AutoResponsiveGrid") %>
        </div>
    </body>
</html>

我的AutoResponsiveGrid.js：

import React from "react"
import PropTypes from "prop-types"
import AutoResponsive from 'autoresponsive-react';
class AutoResponsiveGrid extends React.Component {
  render() {
    return (
      <AutoResponsive ref="container">
      </AutoResponsive>
    );
  }
}

export default AutoResponsiveGrid

如您所见，AutoResponsive div为空，因此我只是尝试使用此React库，它告诉我在此React library中未定义。

我已经使用react_component函数调用调用了另一个React库，即Gyazo，它运行良好。因此，我认为这不是react_component的问题。

此外，我的Heroku日志还告诉我this one所示缺少autoresponsive-react模块。

我尝试过的事情：删除package-lock.json并使用npm install重新创建它，然后重新安装React库。

未捕获的ReferenceError：未定义AutoResponsiveGrid

0 个答案: