将GooglePay与React集成

Question

所以我的任务是将GooglePay集成到我们的React应用中...

文档中建议的一般方法：

        const button = this.paymentsClient.createButton({
            onClick: () => console.log('TODO: click handler')
        });
        document
            .getElementsByClassName('my-payment-class')[0]
            .appendChild(button);

工作完美，但这不是一种非常“反应”的方式...

按钮返回以下内容：

所以我的想法是使用：

            return <div dangerouslySetInnerHTML={{ __html: button }} />;

但是，它呈现为：

当我尝试在jsx中渲染

return <div > {button} </div>;

它抛出一个对象作为React子对象无效（找到：[object HTMLDivElement]）。

任何人都可以共享有效的实现吗？

Answer 1

API返回DOM元素，而不是React元素。这就是为什么React无法渲染

正如您指出的那样，您可以在React元素上使用appendChild，也可以在其JSX表示形式中使用dangerouslySetInnerHTML属性。注意，尽管采用后一种方法，React元素期望DOM元素的原始HTML，而不是对象本身。您可以使用innerHTML属性访问DOM的原始HTML内容，如下所示：

return <div dangerouslySetInnerHTML={{ __html: button.innerHTML }} />;