Question

我需要在反应表单完成加载后运行一个简单的java脚本函数。 JS从第三方加载，所以我无法控制它，我需要运行其中一个函数，以便在我的表单中显示验证码部分。如果我点击F5，那么该区域将按预期显示，但通过应用程序中的路线导航到页面不会触发加载。

我已经知道如果我称这行JS

窗口.__ challenger.callPageRequest（）;

然后出现验证码区域，我知道这是有效的，因为我在正在渲染的表单中添加了一个临时按钮，并在按钮单击时调用功能。但我不能有一些随机按钮，我只需要在每次导航到表格时触发这条JS线。

我尝试过使用：

componentDidMount() {
    window.__challenger.callPageRequest();
}

但是抱怨：

无法读取未定义的属性'callPageRequest'

我尝试添加：

窗口.__ challenger.callPageRequest（）;

到render方法中表单的末尾。

为什么做这么简单的事这么难？任何帮助都会非常感激。

Answer 1

您确定路线更改后componentDidMount是否正在运行？由于不同的参数，仅与其他路线不同的路线不会重新装载。您可以尝试使用componentWillReceiveProps()生命周期方法。

Answer 2

没有带来redux和一个在脚本加载上调度操作的附加组件。我刚才能想到的最好的，如果你使用带有外部src的脚本标签来加载脚本，你可以尝试在脚本标签上添加一个处理程序并在你的渲染方法中渲染它（虽然这有点乱）。您可能需要在构造函数中执行一些this绑定。警告，我没试过。

请参阅此答案：Script load in react

Answer 3

最简单（也可能是最丑陋的）是轮询window并在触发之前检查是否存在该功能：

componentDidMount() {
    const poll = () => {
        if(window.__challenger && window.__challenger.callPageRequest) {
            window.__challenger.callPageRequest();
        }else {
            setTimeout(() => {
                poll();
            }, 250);
        }
    };
    poll();
}

如果它在第一次通过时存在，请继续并立即调用它。如果它还不存在，请等待250毫秒，然后再试一次。

导航到反应'页面'

3 个答案: