www.example.com的React/NextJS集成WeatherWidget.io

ekqde3dh 于 2023-04-05 发布在 React

关注(0)|答案(3)|浏览(135)

我正在尝试将WeatherWidget.io集成到React/NextJS应用程序中。
这不是一个react组件，为了集成它，你必须复制粘贴一个<a>和一个<script>标签。
通过使用NextJS <Head>组件（相当于ReactHelmet），它可以正确渲染服务器端，但是，一旦触发第一次客户端更新，该组件就会消失。
我尝试过使用dangerouslySetInnerHTML，或者在ComponentDidMount中手动创建一个脚本标记，但都不起作用。
对于这种情况，你有什么最佳实践吗？我也尝试过避免组件重新渲染，但将shouldComponentUpdate设置为false也不起作用（我必须完全从渲染树中获取Component，这是不可能的）。

next.js

来源：https://stackoverflow.com/questions/50927165/react-nextjs-integration-of-weatherwidget-io

3条答案

按热度按时间

vecaoik11#

请尝试以下操作：
1.将小部件的script标记放在HTML页面的底部。
1.将a标记放置在元件中。

赞(0）回复(0）举报 2023-04-05

k4aesqcs2#

我设法使用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>
    )
}};

问候！

赞(0）回复(0）举报 2023-04-05

ukqbszuj3#

我必须使用useEffect如下：

import { useEffect } from "react";
export default function GetWeather() {
  useEffect(() => {
    !(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");
  }, []);
  return (
    <div className="weather">
      <a
        className="weatherwidget-io"
        href="https://forecast7.com/en/41d28n73d50/ridgefield/?unit=us"
        data-label_1="RIDGEFIELD"
        data-label_2="WEATHER"
        data-days="3"
        data-theme="pure"
      >
        RIDGEFIELD WEATHER
      </a>
    </div>
  );
}

赞(0）回复(0）举报 2023-04-05

我来回答

www.example.com的React/NextJS集成WeatherWidget.io

3条答案

相关问题

热门标签

最新问答