Question

我正在为菜单编写可重用的组件，但是当我在变量中渲染时，React并没有将属性传递给HTML。我正在使用Browserify进行重新转换。

以下是组件代码：

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

}

现在它有效。谁能指出我这是为什么？

Answer 1

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

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

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

在变量中呈现时，React不传递属性

1 个答案: