如何使用reactjs渲染凸起的纸按钮？

Question

这是应该呈现“提升”纸质按钮的代码：

所有代码都在脚本标签中，并呈现一个未引发的纸质按钮（请参见屏幕截图）。 我可以单击并看到波纹效果，除了外观上看起来很完美。

更新：目前，获得正确渲染的唯一方法是替换

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

应该将“ raised”属性作为this.props ...传递吗？

Answer 1

在JSX中，如果需要自定义HTML属性，则应在其前面加上data- ，然后它将解析为没有前缀的实际名称。 参见docs ;

Answer 2

它在当前版本的React中不起作用。 不过，自定义属性支持是一个未解决的问题 。 就目前而言，我发现此补丁很好用。