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

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

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

 <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 ...传递吗?

#1楼 票数:0

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

#2楼 票数:0 已采纳

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

  ask by imaginair translate from so

未解决问题?本站智能推荐:

2回复

使用ReactJS/Polymer的主题CSS选择器

我正在一个使用ReactJS的项目中,我想修改主题。 我在为主题样式编写CSS选择器时遇到问题。 看起来Reactjs使用了一些影子dom,这会破坏跨组件的CSS选择器。 似乎聚合物使用阴影dom打破了组件之间的css选择器(通过设计)。 我希望child-element的背景颜色根据
1回复

使用React渲染带有子内容的Polymer1.0元素

我一直在努力解决这个问题,最后我设法追查问题的根源,但我不知道如何解决它! 考虑在React渲染方法中渲染Polymer的元素: 以前的代码工作正常,因为<paper-button>没有子元素。 但是以下示例不起作用: 因为<paper-dialog>有几个
1回复

同构ReactJS或Web组件(聚合物)开发人员应该遵循哪一个?[关闭]

在这些年里,我们看到了多种处理Web开发的技术,例如: 同构反应: 它提供了在客户端和服务器之间共享的公共代码库。 网页组件: Polymer.js显示了为浏览器创建本机元素的方法。 这两种技术都是相反的方向。网络开发人员应该遵循哪一项?欢迎任何建议/意见。
1回复

React0.12.2:“错误:JSX不再支持小写组件名称(纸张按钮)”

我试图在React组件中使用Web组件( paper-icon-button ),但出现以下错误: Error: Lower case component names (paper-button) are no longer supported in JSX" error: See http:
7回复

是否可以在React中使用Polymer?

我一直在使用 React 并希望在 React 中使用 Polymer 标签。 React 不识别 Polymer 标签,因为 React 只处理基本的 DOM 标签。 有没有办法将 Polymer 标签添加到 React DOM 库?
1回复

如何在反应组分内使用聚合物组分?可能吗?

我使用谷歌的聚合物制作网络组件,但我也非常有兴趣尝试反应。 所以我想知道是否可以在反应组分的渲染功能中使用聚合物组分?
1回复

Polymer是否使用类似React的合成DOM?

我一直喜欢与Facebook的React合作。 我喜欢的功能之一是综合DOM,它允许大量元素,而不会阻塞移动浏览器。 有人知道Polymer是否也使用非浏览器dom,还是可以选择使用它? 我可以试着将两者结合起来,使用React来构建Polymer,但这听起来像是死路一条。
1回复

“模块解析失败:在NextJS中使用lit组件时出现意外字符‘@’”

我尝试在我的 NextJS 项目中导入一个点亮的组件。 这是我的组件:import {html, css, LitElement} from 'lit';import {customElement} from 'lit/decorators.js';@customElement('my-elemen