将 GooglePay 与 React 集成

Question

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

文档中建议的一般方法：

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

工作完美，但这不是一个非常 'react' 的做事方式...

按钮 returns 这个：

所以我的想法是使用以下方式渲染它：

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

但是这呈现为：

当我尝试在 jsx 中渲染它时

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

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

有人可以分享可行的实现吗？

Answer 1

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

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

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

将 GooglePay 与 React 集成

Integrating GooglePay with React

javascript

reactjs

google-pay