React/NextJS 整合 WeatherWidget.io

Question

我正在尝试将 WeatherWidget.io 集成到 React/NextJS 应用程序中。

这不是 React 组件，为了集成它，您必须复制粘贴 <a> 和 <script> 标签。

通过使用 NextJS <Head> 组件（相当于 ReactHelmet），它可以在服务器端正确呈现，但是，一旦触发第一个客户端更新，该组件就会消失。

我试过使用 dangerouslySetInnerHTML，或在 ComponentDidMount 中手动创建脚本标签，但没有成功。

对于这种情况，您有什么最佳实践吗？我也试图避免重新渲染组件，但是将 shouldComponentUpdate 设置为 false 也不起作用（我必须完全脱离渲染树才能到达组件，这是不可能的）。

Answer 1

尝试以下操作：

将小部件的 script 标签放在 HTML 页面的底部。
将 a 标签放在组件中。

Answer 2

我设法使用 React 纯组件获得了天气小部件。尝试这样的事情。

export class WeatherWidget extends PureComponent {

render() {
    return (
        <div className={this.props.className || ""}>
            <a className="weatherwidget-io" href="https:forecast7.com/es/n24d78n65d42/salta/" data-label_1="SALTA" data-label_2="CAPITAL" data-theme="original" >SALTA CAPITAL</a>

            {!function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                // if (!d.getElementById(id)) {
                    js = d.createElement(s);
                    js.id = id;
                    js.src = 'https:weatherwidget.io/js/widget.min.js';
                    fjs.parentNode.insertBefore(js, fjs);
                // }
            }
                (document, 'script', 'weatherwidget-io-js')
            }

        </div>
    )
}};

此致！

React/NextJS 整合 WeatherWidget.io

React/NextJS integration of WeatherWidget.io

reactjs

nextjs