在变量中渲染时反应不传递属性

Question

我正在为菜单项编写一个可重用的组件，但是当我在变量中呈现它时，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>

键属性功能正常，但路由属性不正常（值正确，但未按应有的方式呈现）。

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

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>)
    }

}

现在可以了。谁能告诉我这是为什么？

Answer 1

在子组件上设置属性时需要删除引号：

<a href={ routeName }>{ label}</a>

它们将被 React 渲染过程正确引用。

在变量中渲染时反应不传递属性

React not passing along properties when rendering in variable

reactjs

react-jsx