在變量中渲染時不反應屬性

我正在爲菜單itens編寫可重用組件，但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>) 
    } 

}

現在，它的工作原理。任何人都可以指出爲什麼是這樣嗎？

來源

2015-03-02 Andre Racz

你爲什麼要引用這些值？例如，您應該可以執行'href = {routeName}'。 – WiredPrairie 2015-03-02 13:30:15

就是這樣，那是錯誤。謝謝！ – 2015-03-02 13:39:19

@WiredPrairie從你的評論中回答問題;） – magnudae 2015-03-02 13:47:32

你需要刪除引號，當你在子組件設置屬性：

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

他們會被渲染做出反應過程中適當引用。

來源

2015-03-02 19:26:42 WiredPrairie

如何使用href添加散列？ – Sorter 2015-10-01 10:48:52

@Sorter - 只需將其添加到字符串。我不確定你在問什麼，如果這不是答案。 – WiredPrairie 2015-10-01 16:26:13

在變量中渲染時不反應屬性

回答

相關問題