我正在尝试将WeatherWidget.io集成到React/NextJS应用程序中。
这不是一个react组件,为了集成它,您必须复制粘贴一个<a>
和一个<script>
标记。
通过使用NextJS <Head>
组件(相当于ReactHelmet),它可以正确地呈现服务器端,但是,一旦触发了第一次客户端更新,该组件就会消失。
我尝试过使用dangerouslySetInnerHTML
,或者在ComponentDidMount
中手动创建脚本标记,但都不起作用。
对于这种情况,您有什么最佳实践吗?我还试图避免重新呈现组件,但将shouldComponentUpdate
设置为false也不起作用(我必须完全离开呈现树才能访问组件,这是不可能的)。
发布于 2020-04-22 03:22:03
我设法使用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>
)
}};
致以问候!
https://stackoverflow.com/questions/50927165
复制相似问题