将 JSX 代码存储到 Javascript 变量中的正确方法（如果可能）

Question

我使用 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 />};
     |                                                        ^

将我的 Link 组件存储在 href 变量中的正确方法是什么？

Answer 1

在跨越多行的 JSX 周围使用 ()

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

Answer 2

你只需要编写普通的 jsx，在你的情况下，你需要删除 jsx 周围的括号，然后包括 "mod/admin" + this.props.link 部分周围的括号，就像你做的那样写在渲染方法中。

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

将 JSX 代码存储到 Javascript 变量中的正确方法（如果可能）

Correct way (if possible) to store JSX code into a Javascript variable

javascript

jsx

reactjs

babeljs