Question

我要使用Autoresponsive-React grid library。我按照这里的安装说明进行操作，只是将basic grids的代码复制到了我创建的react组件中。但是，未显示网格。

这是我的React组件：（我也尝试添加注释掉的导入，但是它不起作用。原因是我要导入的模块没有声明文件。）

import React from "react"
import PropTypes from "prop-types"
# import AutoResponsive from 'autoresponsive-react';
class ResponsiveGrid extends React.Component {
  render() {
    return (
      <AutoResponsive ref="container" {...this.getAutoResponsiveProps()}>
        {
          arrayList.map(function(i) {
            return <div onClick={this.clickItemHandle} className="item" style={this.state.styleList[i]}>{i}</div>;
          }, this)
        }
      </AutoResponsive>
    );
  }
}

export default ResponsiveGrid

当我删除整个AutoResponsive并将其替换为常规文本时，将呈现文本。因此，到了代码中的这一点，只是AutoResponsive没有被渲染。

我正在尝试像这样在progress.html.erb中调用此React组件：

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

但是，React组件没有被渲染。我所看到的只是我在调用React组件之前输入的乱码。这是that的Gyazo。

我的Rails服务器没有给我任何React错误。（没有Webpacker错误会提示我的前端出现问题）。完美的200条回复：

Started GET "/progress" for 127.0.0.1 at 2019-07-22 15:24:29 -0400
Processing by StaticPagesController#progress as HTML
  Rendering static_pages/progress.html.erb within layouts/application
  Rendered static_pages/progress.html.erb within layouts/application (2.0ms)
  Rendered layouts/_rails_default.html.erb (1046.1ms)
  Rendered layouts/_shim.html.erb (0.4ms)
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/helpers/sessions_helper.rb:23
  Rendered layouts/_header.html.erb (52.6ms)
Completed 200 OK in 1138ms (Views: 1131.2ms | ActiveRecord: 4.0ms)

自动响应反应不呈现网格

0 个答案: