首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >WeatherWidget.io的React/NextJS集成

WeatherWidget.io的React/NextJS集成
EN

Stack Overflow用户
提问于 2018-06-19 19:20:17
回答 1查看 911关注 0票数 2

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

这不是一个react组件,为了集成它,您必须复制粘贴一个<a>和一个<script>标记。

通过使用NextJS <Head>组件(相当于ReactHelmet),它可以正确地呈现服务器端,但是,一旦触发了第一次客户端更新,该组件就会消失。

我尝试过使用dangerouslySetInnerHTML,或者在ComponentDidMount中手动创建脚本标记,但都不起作用。

对于这种情况,您有什么最佳实践吗?我还试图避免重新呈现组件,但将shouldComponentUpdate设置为false也不起作用(我必须完全离开呈现树才能访问组件,这是不可能的)。

EN

回答 1

Stack Overflow用户

发布于 2020-04-22 03:22:03

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

代码语言:javascript
复制
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>
    )
}};

致以问候!

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50927165

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档