Rails 5.1 - React - React Burger 菜单不显示答案

【问题标题】：Rails 5.1 - React - React Burger Menu Not displayingRails 5.1 - React - React Burger 菜单不显示
【发布时间】：2018-02-24 18:27:05
【问题描述】：

我有 Rails 5.1 应用程序，正在尝试通过反应使用 this burger menu。我有基本的示例设置，但我的 rails 渲染内容只显示了一秒钟，然后反应汉堡菜单组件似乎推翻了它并让它消失了。这是 react menu burger 组件。

import React from 'react';
import { render } from 'react-dom';
import { push as Menu } from 'react-burger-menu'

var styles = {
...
}

class Example extends React.Component {
  showSettings (event) {
    event.preventDefault();
  }

  render () {
    return (
      <Menu styles={ styles } >
        <a id="home" className="menu-item" href="/">Home</a>
        <a id="about" className="menu-item" href="/about">About</a>
      </Menu>
    );
  }

}
render(<Example />, document.getElementById('app'));

这是我在 rails 主页上的正文。

<body>
  <div id="app">
  <div id="outer-container">
    <header>I am a fixed header!</header>
  <Menu pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" } />
  <main id="page-wrap">
    <%= render 'layouts/messages' %>
  <%= render 'layouts/nav' %>
    <div class="content">
        <%= yield %>    
    </div>
    <%= render '/shared/footer' %>
  </main>
</div>
</div>
<%= javascript_pack_tag 'navbar' %>
</body>

react JS 加载后，固定标头、渲染和产量 ERB 未显示。关于为什么的任何想法？谢谢，对不起，我是 Rails 5.1 的新手并做出反应，所以只是想弄清楚。

【问题讨论】：

标签： javascript ruby-on-rails reactjs

【解决方案1】：

乔，您还需要填写样式。我不知道你是否在没有样式的情况下尝试过，但是把这个信息放在那里，你会看到它出现在你的浏览器中。您可以在 react-burger-menu 的说明底部找到其余样式 sn-p。您还需要立即关闭<div id="app"></div>，而不是在内容末尾。

var styles = {
  bmBurgerButton: {
    position: "fixed",
    width: "36px",
    height: "30px",
    left: "36px",
    top: "36px"
  },
  bmBurgerBars: {
    background: "#373a47"
  },
}

块引用

【讨论】：

样式部分中的“...”表示样式存在 - 我只是将它们从问题中删除以使其更具可读性。无论有没有样式，渲染问题仍然存在。还有其他想法吗？
我将您的反应代码放入代码框，它显示了汉堡图标，所以我假设 Rails 代码中的某些内容可能是问题所在。
对沙盒的良好调用。我也这样做了，并意识到我需要立即关闭
而不是在其他内容之后。答案是
。如果你回答这个问题，我会接受。干杯。感谢您的帮助。