将 GooglePay 与 React 集成答案

【问题标题】：Integrating GooglePay with React将 GooglePay 与 React 集成
【发布时间】：2018-12-17 12:00:00
【问题描述】：

所以我的任务是将 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>;

它抛出一个 Objects are not valid as a React child (found: [object HTMLDivElement])。

谁有一个可行的实现来分享？

【问题讨论】：

标签： javascript reactjs google-pay

【解决方案1】：

API 返回一个 DOM 元素，而不是 React 元素。这就是 React 无法渲染它的原因

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

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

【讨论】：