我正在为菜单项编写一个可重用的组件，但是当我在变量中呈现它时，React 没有将属性传递给 HTML。我正在使用 Browserify 和 reactify 转换。

下面是组件代码：

var React = require('react');
var ReactPropTypes = React.PropTypes;



var Menu = React.createClass({

  propTypes: {
    route: React.PropTypes.string,
    key: React.PropTypes.string.isRequired
  },

  render: function() {
    //alert(this.props.route);
    var routeName = this.props.route;
    var content = null;
    if (routeName) {
        content = (<a href="{routeName}">
                      {this.props.children}
                   </a>);
    } else {
        content = (<a>{this.props.children}</a>);
    }
    return (<li key="{this.props.key}">{content}</li>);
  }

});


module.exports = Menu;

最终的 HTML 输出是：

<li data-reactid=".0.0.2.0.$home">
    <a href="{routeName}" data reactid=".0.0.2.0.$home.0">Home</a>
</li>

key 属性正常运行，但 route 属性不正常（值正确，但未按应有的方式呈现）。

如果我将渲染方法更改为：

render: function() {
    //alert(this.props.route);
    var routeName = this.props.route;
    var content = null;
    if (routeName) {
        return (<li key="{this.props.key}">
                    <a href={routeName}>{this.props.children}</a>
                </li>)
    } else {
        return (<li key="{this.props.key}">
                    <a>{this.props.children}</a>
                </li>)
    }

}

现在它起作用了。谁能指出我这是为什么？