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

Posted 2023-02-21

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

【英文标题】：Correct way (if possible) to store JSX code into a Javascript variable

【发布时间】：2017-06-16 06:27:50

【问题描述】：

我使用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 变量中的正确方法是什么？

【问题讨论】：

您能否详细说明您想要实现的目标？ href 属性需要一个字符串。或者您将<Link> 替换为<a>。而且您的代码在语法上是错误的。

【参考方案1】：

您只需编写普通的 jsx，在您的情况下，您需要删除 jsx 周围的括号，然后在“mod/admin”+ this.props.link 部分周围包含括号，就像您在写入时一样渲染方法。

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

【参考方案2】：

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

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

【讨论】：

抱歉，我实际上并没有仔细了解您到底想要实现什么，您到底想分配给 href 什么？ = 符号后还有一个左括号，并且永远不会关闭它

将 JSX 标签拆分为多行不需要括号。