javascript - ReactJS - 未捕获错误 : Syntax error, 无法识别的表达式

Question

为什么我会收到此错误:

Uncaught Error: Syntax error, unrecognized expression:
#{this.props.item.url}

nav-item.jsx:

import React from 'react';

class NavItem extends React.Component
{
    render() {
        if (this.props.item.code == 'contact') {
            return <li><a href={'#' + this.props.item.url} className="button-open-overlay" data-target-id="{this.props.item.url}">{this.props.item.title}</a></li>
        } else {
            return <li><a href={this.props.item.url}>{this.props.item.title}</a></li>
        }
    }
}

export { NavItem as default }

有什么想法吗？

编辑:

push-nav.jsx:

import React from 'react';
import $ from 'jquery';

import NavItem from './nav-item';

class PushNav extends React.Component
{
    constructor(props) {
        super(props);
        this.state = {
            navitems: [],
        };
    }

    // Then fetch the data using $.get():
    componentDidMount() {
        this.serverRequest = $.getJSON(this.props.source, function (result) {
            this.setState({
                navitems: result.nav
            });
        }.bind(this));
    }

    componentWillUnmount() {
        this.serverRequest.abort();
    }

    render() {
        var loop = this.state.navitems.map(function(item, index){
            return <NavItem key={index} item={item}></NavItem>;
        });

        return (
            <div>
                <a className="visible-xs button-push-menu" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
                    <span className="glyphicon glyphicon-align-justify"></span>
                </a>

                <div className="navmenu navmenu-default navmenu-fixed-left offcanvas-sm offcanvas-md offcanvas-lg">
                    <ul className="push-nav">{ loop }</ul>
                </div>
            </div>
        )
    }
}

export { PushNav as default }

示例数据:

{
    "nav": [{
        "navId": "3",
        "title": "Art",
        "code": "art",
        "href": null,
        "style": null,
        "sort": "3",
        "url": "blog",
        "parentId": null,
        "totalChildren": "0",
        "createdOn": null,
        "updatedOn": null
    }, {
        "navId": "4",
        "title": "Technology",
        "code": "technology",
        "href": null,
        "style": null,
        "sort": "4",
        "url": "projects",
        "parentId": null,
        "totalChildren": "0",
        "createdOn": null,
        "updatedOn": null
    }, {
        "navId": "5",
        "title": "Contact",
        "code": "contact",
        "href": null,
        "style": null,
        "sort": "5",
        "url": "contact",
        "parentId": null,
        "totalChildren": "0",
        "createdOn": null,
        "updatedOn": null
    }]
}

Answer 1

这是因为您的数据是在 componentDidMount 上设置的，该状态是在初始渲染后执行的。因此，要么在 componentWillMount 中设置数据，要么在 NavItem 组件中执行以下操作

import React from 'react';

class NavItem extends React.Component
{
    render() {
        if (this.props.item === undefined) {
          return null
       } else if (this.props.item.code == 'contact') {
            return <li><a href={'#' + this.props.item.url} className="button-open-overlay" data-target-id="{this.props.item.url}">{this.props.item.title}</a></li>
       } else {
            return <li><a href={this.props.item.url}>{this.props.item.title}</a></li>
       }
    }
}

export { NavItem as default }