首页 文章

Rails 5.1 - React - React Burger Menu不显示

提问于
浏览 次
1

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

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>

反应JS加载后，未显示固定 Headers ，渲染和yield ERB . 有什么想法吗？谢谢，对不起，我是Rails 5.1的新手并做出反应，所以只是想弄清楚 .

javascript ruby-on-rails reactjs

1 回答

  • 1

    乔，你也需要填写你的风格 . 我不会看到它出现在您的浏览器中 . 您可以在react-burger-menu的说明底部找到其余的样式片段 . 您还需要在内容之后关闭 <div id="app"></div> ，而不是在内容结束时关闭 .

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

    Blockquote

    回复于

相关问题