我一直在努力解决这个问题,最后我设法追查问题的根源,但我不知道如何解决它!
考虑在React渲染方法中渲染Polymer的元素:
ReactDOM.render(
<paper-button>Ok</paper-button>,
document.getElementById('root')
);
以前的代码工作正常,因为 <paper-button>
没有子元素 . 但是以下示例不起作用:
ReactDOM.render(
<paper-dialog>
<h2>Header</h2>
<paper-dialog-scrollable>
Lorem ipsum...
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Accept</paper-button>
</div>
</paper-dialog>,
document.getElementById('root')
);
因为 <paper-dialog>
有几个子元素 . 在Polymer 's library there'中有一个 <content>
标记,它表示在命名的自定义标记中给出的子元素,以及它们应该如何嵌入到自定义标记的最终实现中(它就像一个门户网站) . 看起来当使用React将Polymer元素添加到文档中时,子元素不会通过门户传递!
当提到的 paper-dialog
Polymer元素通过React时,这就是出现的结果:
<paper-dialog data-reactroot="">
<h2>Header</h2>
<paper-dialog-scrollable
class="x-scope paper-dialog-scrollable-0 no-padding scrolled-to-bottom">
Lorem ipsum...
</paper-dialog-scrollable>
<div>
<paper-button
role="button" tabindex="0"
animated="" aria-disabled="false"
elevation="0" dialog-dismiss="true"
class="x-scope paper-button-0">
Cancel
</paper-button>
<paper-button
role="button" tabindex="0"
animated="" aria-disabled="false"
elevation="0" dialog-confirm="true"
class="x-scope paper-button-0">
Accept
</paper-button>
</div>
</paper-dialog>
如果我按照google指示的方式进行操作(将标签放在HTML中开始),这就是dom树的样子:
<paper-dialog>
<h2>Header</h2>
<paper-dialog-scrollable
class="x-scope paper-dialog-scrollable-0 no-padding can-scroll">
<div id="scrollable"
class="scrollable style-scope paper-dialog-scrollable fit">
Lorem ipsum...
</div>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button
role="button" tabindex="0"
animated="" aria-disabled="false"
elevation="0" dialog-dismiss=""
class="x-scope paper-button-0">
Cancel
</paper-button>
<paper-button
role="button" tabindex="0"
animated="" aria-disabled="false"
elevation="0" dialog-confirm=""
class="x-scope paper-button-0">
Accept
</paper-button>
</div>
</paper-dialog>
粗体部分是不一致的部分 .
有谁知道如何实际匹配Polymer与React?
1 回答
您是否尝试将
<paper-dialog>
包装到另一个反应组件中,然后将其送入ReactDOM