javascript - 将 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 ”的做事方式......

按钮返回:

所以我的想法是使用:

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

但是这呈现为:

当我尝试在 jsx 中呈现它时

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

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

有人可以分享一个有效的实现吗？

Answer 1

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

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

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