如何使用reactjs渲染凸起的紙張按鈕？

下面是應該渲染「凸起」紙張按鈕的代碼：如何使用reactjs渲染凸起的紙張按鈕？

所有代碼都在腳本標記中，並呈現未提升的紙張按鈕（請參閱屏幕快照）。我可以點擊並看到RIPPLE效果，除了外觀外，看起來很完美。

UPDATE：的時刻，以獲得正確的渲染的唯一途徑是通過更換

<paper-button raised>test</paper-button>

<div dangerouslySetInnerHTML={{__html: '<paper-button raised>test</paper-button>'}} />

什麼解決辦法避免這種「危險' 辦法？

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
    <link rel="import" href="bower_components/paper-button/paper-button.html"> 
    <title>Hello React</title> 
    <script src="bower_components/react/react.min.js"></script> 
    <script src="bower_components/react/JSXTransformer.js"></script> 
    </head> 
    <body> 
    <div id="content"> 
    </div> 

    <script type="text/jsx"> 
     var ButtonT = React.createClass({ 

      render: function() { 
       return (
       <div> 
        <paper-button raised="true">test</paper-button> 
       </div> 
       ); 
      } 

     }); 
     React.render(
      <ButtonT />, 
      document.getElementById('content') 
     ); 

    </script> 
    </body> 
</html>

應該將「raise」屬性作爲this.props傳遞...？

來源

2015-03-30 imaginair

您無法傳遞自定義屬性：https：//github.com/facebook/react/issues/140。 – WiredPrairie 2015-03-31 00:15:19

React中可能有[True的自定義屬性（例如Microdata）]的副本（http://stackoverflow.com/questions/21648347/true-custom-attributes-e-g-microdata-in-react） – WiredPrairie 2015-03-31 00:16:06

它不會在當前版本的React中工作。不過，自定義屬性支持是open issue。現在，我發現這個patch運作良好。

來源

2015-04-01 15:20:25 AndrewRota

在JSX中，如果你想要一個自定義的HTML屬性，你應該用data-作爲它的前綴，然後它將被解析爲沒有前綴的實際名稱。見docs;

來源

2015-03-30 22:27:49 Roman

不，它沒有。它將被包含在元素上的「data-raised」中。所以除非Polymer組件可以使用它，否則它不起作用。 – WiredPrairie 2015-03-31 00:14:15

不幸的是，這不起作用，並不會解決問題。 :( – 2015-09-11 20:40:13

如何使用reactjs渲染凸起的紙張按鈕？

回答

相關問題