正确的方式(如果可能)将JSX代码存储到Javascript变量中

问题描述

我已经使用ReactJs´s JSX语法编写了以下代码:

I´ve written the following code using ReactJs´s JSX syntax:

import { Link } from 'react-router';

class SidebarMenuItem extends React.Component {

render() {

    var href = (this.props.submenu ? 'javascript:' : {<Link to="mod/admin" + this.props.link />};

    return ( 

        <a href={href} onClick={this.selected}>
            <i className={'fa ' + this.props.icon} />
            <span>{this.props.title}</span>
        </a>

    )
  }
}

但是它看到我无法将直接的JSX代码存储到变量中，因为出现以下错误:

But it seend that I cannot store a direct JSX code into a variable, as I got the following error:

Module build failed: SyntaxError: D:/9. DEV/client/components/App/SidebarMenuItem.js: Unexpected token, expected , (41:52)

  40 | 
> 41 |      var href = (this.props.submenu ? 'javascript:' : {<Link to="mod/admin" + this.props.link />};
     |                                                        ^

将链接组件存储在href变量中的正确方法是什么?

What is the correct way to store my Link component in the href variable ?

推荐答案

您只需编写普通的jsx，就您而言，您需要删除jsx周围的括号，然后在"mod/admin"周围加上括号.就像在render方法中编写代码时一样，this.props.link部分.

you would just write plain jsx, in your case you need to remove the brackets around the jsx, and then include the brackets around the "mod/admin" + this.props.link portion just like you would when you write in the render method.

var href = this.props.submenu ? 'javascript:' : <Link to={"mod/admin" + this.props.link} />

这篇关于正确的方式(如果可能)将JSX代码存储到Javascript变量中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！