[英]Mounting external scripts that transform the DOM in React Components?
Needing a solution to a problem that I have asked in many ways without resolve. 需要一个解决方案来解决我在很多方面没有解决问题的问题。
I have external scripts from TripAdvisor that are being mounted in a component as componentDidMount
. 我有来自TripAdvisor的外部脚本,它们作为
componentDidMount
安装在componentDidMount
。 Also shouldComponentUpdate()
as false
to avoid future eventListeners
also mounted by componentDidMount
in the layouts/index.js
from affecting the TripAdvisor content to disappear due to re-render of the DOM. 另外,
shouldComponentUpdate()
为false
以避免将来eventListeners
layouts/index.js
中的componentDidMount
挂载的未来eventListeners
影响由于重新呈现DOM而导致的TripAdvisor内容消失。
componentDidMount () {
const tripadvisorLeft = document.createElement("script");
tripadvisorLeft.src = "https://www.jscache.com/wejs?wtype=selfserveprop&uniq=789&locationId=10467767&lang=en_AU&rating=true&nreviews=0&writereviewlink=true&popIdx=true&iswide=true&border=false&display_version=2";
document.body.appendChild(tripadvisorLeft);
const tripadvisorRight = document.createElement("script");
tripadvisorRight.src = "https://www.jscache.com/wejs?wtype=selfserveprop&uniq=998&locationId=10467767&lang=en_AU&rating=false&nreviews=4&writereviewlink=false&popIdx=false&iswide=true&border=false&display_version=2";
document.body.appendChild(tripadvisorRight);
}
shouldComponentUpdate() {
return false;
}
The problem is that when using Link
by either react-route
or gatsby-link
to and from the page that contains the component the content from TripAdvisor is not rendered. 问题是,当使用
Link
的任何react-route
或gatsby-link
并从包含登录内容不被渲染组件的页面。
If I refresh the browser on the page - the content is available. 如果我刷新页面上的浏览器 - 内容可用。 See here - example
见这里 - 例子
How can I unmount
, forceUpdate
or any other solution to getting these scripts re-render on route change
? 如何
unmount
, forceUpdate
或任何其他解决方案,以便在route change
重新呈现这些脚本?
It appears that the TripAdvisor script is creating a function called injectselfserveprop***
. 看来, 登录脚本创建一个名为功能
injectselfserveprop***
。 (where ***
are random numbers). (其中
***
是随机数)。
This function is responsible to display the HTML code of the TripAdvisor widget. 此函数负责显示TripAdvisor小部件的HTML代码。
However, for obscure reason this function is not called when you reach the Component with Link
. 但是,由于不明原因,当您到达带
Link
的Component时,不会调用此函数。
This is one solution for your issue, and might not be the best: 这是您的问题的一个解决方案,可能不是最好的:
Because the TripAdvisor ' script creates these functions, we have to define the scripts before rendering the TripAdvisor
component. 因为TripAdvisor '脚本创建了这些函数,所以我们必须在渲染
TripAdvisor
组件之前定义脚本。
<Helmet>
// ...
<script src={`https://www.jscache.com/wejs?wtype=selfserveprop&uniq=789&locationId=10467767&lang=en_AU&rating=true&nreviews=0&writereviewlink=true&popIdx=true&iswide=true&border=false&display_version=2`}/>
<script src={`https://www.jscache.com/wejs?wtype=selfserveprop&uniq=998&locationId=10467767&lang=en_AU&rating=false&nreviews=4&writereviewlink=false&popIdx=false&iswide=true&border=false&display_version=2`}/>
</Helmet>
injectselfserveprop
functions on TripAdvisor
componentDidMount() TripAdvisor
componentDidMount()上调用injectselfserveprop
函数 componentDidMount() {
// find any function that begins with 'injectselfserveprop'
// and execute it.
Object.keys(window).forEach((key) => {
if (key.match(/^injectselfserveprop[0-9]+$/)) {
window[key]();
}
});
}
I have tried this and it works for me. 我试过这个,它对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.