Ruby on rails 如何在汉堡包菜单的React on Rails中添加注销，I'；顺便说一下，我是个学生

我正在使用React on Rails，目前正在使用ERB组件注销。我正在为应用程序创建一个汉堡包菜单，并将注销放在其中。目前，它只是使用Rails中的

来打开窗口。我想把它放在React组件中。请帮忙。我对Rails上使用React还是个新手。代码如下所示

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}来自“React”
类MenuContent扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
我正在尝试在这里添加JavaScript代码。下面是我在Ruby中的实现方法。
在菜单外单击以将其关闭，或在触摸设备上滑动其关闭
)
}
}
导出默认菜单内容

正在将此^1导入此处（如下）。它与代码的其余部分一起工作

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

import React，{Component}来自“React”
从“奶酪汉堡菜单”导入奶酪汉堡菜单；
从“反应汉堡菜单”导入汉堡菜单；
从“/MenuContent”导入菜单内容；
类导航栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
美诺朋：错
};
}
openMenu（）{
this.setState（{menuOpen:true}）；
}
关闭菜单（）{
this.setState（{menuOpen:false}）；
}
render（）{
返回(
)
}
}
导出默认导航栏

您实际上可以通过客户端注销。 rails

会话所做的一切都是设置浏览器cookie。通过打开控制台并键入

document.cookie

如果您登录，您可能会看到以下内容

"auth_token=icHQZ7QB5WK1PPXCWIiF0A"

import React, { Component } from 'react'

class MenuContent extends Component {
  onLogout = () => {
    document.cookie = 'auth_token=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'
  }

  render() {
    return (
      <div className="menu">
        <div onClick={this.onLogout} className="Logout">
          Click to Log Out
        </div>
        <p className="hint">
          Click outside the menu to close it, or swipe it closed on touch device
        </p>
      </div>
    )
  }
}

export default MenuContent

auth_token
是cookie名称。要删除此cookie，您需要将其过期日期设置为过去：

document.cookie='auth_token=；expires=周四，1970年1月1日00:00:01 GMT；'；
//将“auth_token”替换为您正在使用的任何cookie名称。


如果这行得通，那就意味着在你的反应中，你只需做如下的事情

"auth_token=icHQZ7QB5WK1PPXCWIiF0A"

import React, { Component } from 'react'

class MenuContent extends Component {
  onLogout = () => {
    document.cookie = 'auth_token=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'
  }

  render() {
    return (
      <div className="menu">
        <div onClick={this.onLogout} className="Logout">
          Click to Log Out
        </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}来自“React”
类MenuContent扩展组件{
onLogout=（）=>{
document.cookie='auth_token=；expires=Thu，1970年1月1日00:00:01 GMT；'
}
render（）{
返回(
单击以注销

在菜单外单击以将其关闭，或在触摸设备上滑动其关闭

)
}
}
导出默认菜单内容
我使用此代码进行了注销。谢谢所有回应的人

import React, { Component } from 'react'
import axios from 'axios'

// import './menuContent.scss'

class MenuContent extends Component {
  constructor(props) {
    super(props)
  }
   handleLogout = () => {
const link = document.createElement('a');
link.setAttribute('href', '/users/sign_out');
link.setAttribute('rel', 'nofollow');
link.setAttribute('data-method', 'delete');
document.body.appendChild(link);
link.click();
}

  render() {
    return (
      <div className="grandMenu">
          <div className="menu">
            <div className="signButton"></div>
              <button onClick={this.handleLogout}>Sign Out</button>
            <p>hello world</p>
          </div>
            <p className="hint">
              Click outside the menu to close it, or swipe it away.
            </p>
        </div>
    )
  }
}


export default MenuContent

import React，{Component}来自“React”
从“axios”导入axios
//导入“/menuContent.scss”
类MenuContent扩展组件{
建造师（道具）{
超级（道具）
}
handleLogout=（）=>{
const link=document.createElement（'a'）；
link.setAttribute（'href'，'/users/sign_out'）；
setAttribute（'rel'，'nofollow'）；
link.setAttribute（'data-method'，'delete'）；
document.body.appendChild（链接）；
link.click（）；
}
render（）{
返回(
退出
你好，世界


在菜单外单击以将其关闭，或将其滑开。

)
}
}
导出默认菜单内容

顺便说一句，我应该早些提到这一点。登录是通过API和使用Desive实现的
 谢谢你的回复。我在控制台中使用document.cookie，但在终端中使用“rails s”时没有出现任何问题。我使用“设计”是否重要？请确保您已登录。然后在浏览器控制台中键入document.cookie。