如何使用 reactjs 呈现凸起的纸按钮？

Question

这是应该呈现 "raised" 纸按钮的代码：

所有代码都在一个脚本标签中，并呈现一个未 RAISED 的纸按钮（参见屏幕截图）。可以点开看RIPPLE效果，除了外观，其他都很完美

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

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

通过

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

有任何解决方法可以避免这种 'dangerous' 方式吗？

<!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。自定义属性支持 open issue, though. For now, I've found this patch 效果很好。

如何使用 reactjs 呈现凸起的纸按钮？

how to render a raised paper-button with reactjs?

reactjs

polymer