Question

这是应该呈现＆＃34;引发的代码＆＃34;纸按钮：

所有代码都在脚本标记中，并呈现一个非RAISED的纸质按钮（参见屏幕截图）。我可以点击并看到RIPPLE效果，除了外观外似乎很完美。

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

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

BY

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

任何避免这种危险的工作方式＆＃39;方式是什么？

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

＆＃34;引发＆＃34;属性可以作为this.props传递......？

Answer 1

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

Answer 2

它在当前版本的React中无法工作。但是，自定义属性支持是open issue。现在，我发现这个patch效果很好。

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

2 个答案: