使用 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 Polymer 元素通过 React 时，结果如下：

标题

洛雷姆·伊普森...

真” class="x-scope paper-button-0"> 取消 真” class="x-scope paper-button-0"> 接受

如果我按照谷歌的指示去做（将标签放在 HTML 中开始），这就是 dom 树的样子：

标题

洛雷姆·伊普森...

class="按钮"> 取消 接受

粗体部分为分歧部分。

有人知道如何真正将 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'));