javascript - React组件找不到函数

标签 javascript reactjs jsx

我的应用程序有一个组件,可以在某些页面的顶部创建导航栏。我想仅在用户当前登录时显示“注销”按钮(localStorage 中存储有 token )。

当运行下面的代码时,浏览器会给出以下错误:

ReferenceError:找不到变量:showLogout

import React from 'react'
import NavHelper from './components/nav-helper'

export default React.createClass({
  render () {
    return(
      <NavHelper>
        <nav className='top-nav top-nav-light cf' role='navigation'>
          <input id='menu-toggle' className='menu-toggle' type='checkbox'/>
          <label htmlFor='menu-toggle'>Menu</label>
            <ul className='list-unstyled list-inline cf'>
              <li><a href="/home">Website</a></li>
              <li><a href='/languages'>Languages</a></li>
              <li><a href='/topics'>Topics</a></li>
              //==========================
              {window.localStorage.token ? showLogout() : null}
              //==========================
              <li className='pull-right'><a href='/saved'>Saved</a></li>
            </ul>
        </nav>
        <div className='container'>
          {this.props.children}
        </div>
      </NavHelper>

    )
  },
  showLogout() {
    return (<li className='pull-right'><a href='/logout'>Logout</a></li>)
  }
})

最佳答案

由于这是一个类,因此您应该引用如下内部函数:this.showLogout()

关于javascript - React组件找不到函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35421048/

相关文章:

javascript - JSPDF - addHTML() 多 Canvas 页面

javascript - 在React控制组件中清除datalist输入onClick

javascript - 如何在JSX中编写嵌套循环以减少重复代码?

react-native - 使用react-navigation时redux状态不发送

javascript - 由于 JS 错误,Magento 无法在管理中创建订单

javascript - Jquery, ajax, javascript - 通过 id 获取元素

javascript - 在 JavaScript 中间接应用 CSS

javascript - 如何在redux操作中获取userid?

javascript - 在自定义 Telescope 主题中显示域名 url

reactjs - 导入 4 个文件夹深的文件