reactjs - 使用 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，结果如下:

<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 真正匹配起来吗？

Answer 1

您是否尝试过包装 <paper-dialog>到另一个 react 组件中，然后将其输入到 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'));