如何用reactjs渲染一个凸起的纸质按钮？答案

【问题标题】：how to render a raised paper-button with reactjs?如何用reactjs渲染一个凸起的纸质按钮？
【发布时间】：2015-06-04 01:39:57
【问题描述】：

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

所有代码都在一个脚本标签中，并呈现一个未提升的纸质按钮（见屏幕截图）。可以点击查看涟漪效果，除了外观外，其他都还算完美。

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

<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... 传递？

【问题讨论】：

不能传递自定义属性：github.com/facebook/react/issues/140.
True custom attributes (e.g. Microdata) in React的可能重复

标签： polymer reactjs

【解决方案1】：

它不适用于当前版本的 React。不过，自定义属性支持是 open issue。目前，我发现这个patch 效果很好。

【讨论】：

【解决方案2】：

在 JSX 中，如果你想要一个自定义的 HTML 属性，你应该在它前面加上 data-，然后它将被解析为没有前缀的实际名称。见docs；

【讨论】：

不，它没有。它将作为data-raised 包含在元素上。所以除非 Polymer 组件可以使用它，否则它不会工作。
不幸的是，这不起作用，也无法解决问题。 :(