我正在使用React on Rails,目前正在使用ERB组件进行注销。我正在为应用程序创建汉堡菜单,并将注销放在其中。目前,它只是使用Rails中的<%= link_to "Logout", destroy_user_session_path, method: :delete %>
放在开头。我想把它放在React组件中。请帮忙。我还不太熟悉在React on Rails上使用。以下是此代码。
import React, { Component } from 'react'
class MenuContent extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="menu">
<div className="Logout">
I'm trying to add the JavaScript code here. Here how I'm doing it in Ruby.
<%= link_to "Logout", destroy_user_session_path, method: :delete %>
</div>
<p className="hint">Click outside the menu to close it, or swipe it closed on touch device</p>
</div>
)
}
}
export default MenuContent
这^被导入到这里(下面)。它与代码的其余部分配合工作。
import React, {Component} from 'react'
import CheeseburgerMenu from "cheeseburger-menu";
import HamburgerMenu from "react-hamburger-menu";
import MenuContent from "./MenuContent";
class Navbar extends Component {
constructor(props) {
super(props);
this.state = {
menuOpen: false
};
}
openMenu() {
this.setState({ menuOpen: true });
}
closeMenu() {
this.setState({ menuOpen: false });
}
render(){
return(
<div>
<CheeseburgerMenu
isOpen={this.state.menuOpen}
closeCallback={this.closeMenu.bind(this)}>
<MenuContent closeCallback={this.closeMenu.bind(this)} />
</CheeseburgerMenu>
<HamburgerMenu
isOpen={this.state.menuOpen}
menuClicked={this.openMenu.bind(this)}
width={32}
height={24}
strokeWidth={3}
rotate={0}
color="black"
borderRadius={0}
animationDuration={0.5} />
</div>
)
}
}
export default Navbar