在React JSX中使用非規範屬性？比如ng-href

Question

我對React非常熟悉，並且正在逐漸將我的Angular應用程序移動到它。目前，我的網站上有一個反應組件。但是，我需要它在我的React組件中具有ui-href屬性的元素。我試圖把它作爲一個字符串，如下所示：

<a { "ui-href='" + this.props.stateLink + "'" } >...</a> 

但沒有快樂，它說有關意外字符串的錯誤。

我也讀過你可以用data-作爲前綴自定義屬性來使它們工作，這是真的，但它會保持連接data-，例如， data-ui-href是它創建的實際最終屬性。

任何已知的解決方法？

Answer 1

我認爲意外的字符串錯誤正在發生，因爲您正在混合Angular & React語法。試試這個：

<a data-ui-href={this.props.stateLink} >...</a> 

它確實在屬性中保留data-前綴。不知道該解決方法是什麼。

Answer 2

這個帖子中有幾個潛在的解決方法：https://github.com/facebook/react/issues/140雖然沒有一個好的解決方案。

Answer 3

將它作爲React的一部分已經在工作中，但它尚未完成。這是最初的問題。 https://github.com/facebook/react/issues/140

現在的一種解決方法是在React的外部添加屬性。例如在componentDidMount中。

var Hello = React.createClass({ 

    componentDidMount: function() { 
     React.findDOMNode(this.refs.link).setAttribute('ui-href', 'value'); 
    }, 

    render: function() { 
     return <div> 
      <a ref="link">Something</a> 
     </div>; 
    } 
}); 

http://jsbin.com/cuzebuxuci/1/edit?html,js,output