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);

完美运行，但这不是一种非常“反应”的做事方式......

该按钮返回：

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

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

但是，这会导致：

当我尝试在 jsx 中渲染它时

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

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

任何人都有一个可行的实现来分享？

Answer 1

the API returns a DOM element, not a React element. That's why React can't render it

As you well pointed, you can use appendChild on the React element, or the dangerouslySetInnerHTML property in its JSX representation. Note though that when you take the latter approach, the React element is expecting the raw HTML of the DOM element, not the object itself. You can access the raw HTML content of the DOM using the innerHTML property, like so:

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