Question

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

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

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

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

在这种情况下，您有最佳实践吗？我还尝试避免重新渲染组件，但是将shouldComponentUpdate设置为false也不起作用（我必须完全从渲染树中获取Component，这是不可能的）。 / p>

Answer 1

尝试以下操作：

将小部件的script标签放置在HTML页面的底部。
将a标签放置在组件中。
在该组件的componentDidMount方法中，添加以下代码：

__weatherwidget_init();

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

致谢！

WeatherWidget.io的React / NextJS集成

2 个答案: