使用React渲染具有子内容的Polymer 1.0元素

Question

我已经为此挣扎了一段时间，终于找到了问题的根源，但我不知道如何解决它！

考虑在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的库中，有一个<content>标签，它表示命名的自定义标签中给定的子元素，以及它们应该如何嵌入自定义标签的最终实现中（它就像一个门户）。当React用于将Polymer元素添加到文档中时，子元素似乎不会通过门户传递！

当提到的paper-dialog聚合物元素通过React时，这就是结果：

<纸张对话框数据反应室＝"gt；<h2>页眉<h2><可滚动的图纸对话框class＝"；x-scope paper-dialog-scrollable-0无填充滚动到底部">Lorem ipsum。。。<纸张对话框可滚动><div><纸张按钮角色="；按钮"；tabindex="；0"；animated＝"动画"aria-disabled="；false"；仰角＝"；0"；对话框解除=" true"；class＝"；x-scope paper-button-0">取消<纸张按钮><纸张按钮角色="；按钮"；tabindex="；0"；animated＝"动画"aria-disabled="；false"；仰角＝"；0"；对话框确认=" true"；class＝"；x-scope paper-button-0">接受<纸张按钮><div><纸张对话框>

在这种情况下，如果我按照谷歌的指示进行操作（首先将标签放在HTML中），以下是dom树的样子：

<纸张对话框><h2>页眉<h2><可滚动的图纸对话框class＝"；x-scope paper-dialog-scrollable-0无填充可以滚动"><div id＝"；可滚动的"；class＝"；可滚动样式范围纸对话框可滚动适合">Lorem ipsum。。。<div><纸张对话框可滚动><divclass＝"；按钮" ><纸张按钮角色="；按钮"；tabindex="；0"；animated＝"动画"aria-disabled="；false"；仰角＝"；0"；对话框解除="class＝"；x-scope paper-button-0">取消<纸张按钮><纸张按钮角色="；按钮"；tabindex="；0"；animated＝"动画"aria-disabled="；false"；仰角＝"；0"；对话框确认="class＝"；x-scope paper-button-0">接受<纸张按钮><div><纸张对话框>

粗体部分为不一致部分。

有人知道如何将Polymer与React真正匹配吗？

Answer 1

您是否尝试过将<paper-dialog>包装到另一个反应组分中，然后像一样将其送入ReactDOM

var PaperDialog = React.createClass({
    render: function () {
        return (
            <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>);
    }
});
ReactDOM.render(<PaperDialog />, document.getElementById('root'));