web-dev-qa-db-ja.com

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

Linkコンポーネントをhref変数に格納する正しい方法は何ですか？

javascriptreactjsjsxbabel
9
Mendes

あなたは単純なjsxを書くだけです、あなたのケースではjsxの周りの括弧を削除し、それからrenderメソッドで書くときと同じように "mod/admin" + this.props.link部分の周りに括弧を含める必要があります。

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

複数行にわたるJSXの周りで（）を使用します

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