Правильный способ (если возможно) хранения кода JSX в переменной Javascript

Я написал следующий код, используя ReactJs´s JSX синтаксис:

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 в переменную, так как я получил следующую ошибку:

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 переменной ?

6
babel javascript jsx reactjs

2 ответов

вы просто напишете простой jsx, в вашем случае вам нужно удалить скобки вокруг jsx, а затем включить скобки вокруг "mod/admin" + this.реквизит.ссылка часть так же, как вы бы, когда вы пишете в методе рендеринга. 

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

используйте () вокруг JSX, который охватывает несколько строк

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