如何关闭React组件中的窗口？

问题描述：

这听起来可笑的简单，但我无法找到谷歌这方面的任何解决方案。如何关闭React组件中的窗口？

在我的页面上，我有一个按钮关闭该页面本身

<Button onClick={() => window.close()} >Close</Button>

但每次触发按钮，我得到了我使用react-native我的移动应用程序的警告

Scripts may close only the windows that were opened by it.

，它连接到keycloak到（通过RN的WebView）开放Facebook的认证页面，然后，在这之后，keycloak重定向到success页面（localhost/login/success其中有按钮关闭该页面本身。该页面在next.js下）。连我直接访问localhost/login/success上的浏览器，我无法靠近页面既不

更新我设法用onNavigationStateChange解决，并检查navState.url包含success/login或不触发状态，并关闭WebView。但我仍然好奇如何关闭窗口React？

答

您可以使用onMessage道具和网页视图之间进行通信阵营本土。

被调用函数时webview电话 window.postMessage。设置此属性将注入 postMessage全球到您的webview，但仍然会调用的postMessage预先存在的价值。

例

_onMessage = (message) => { 
    console.log(message); 
} 

render() { 
    return (<WebView ref={(ref) => { this.webView = ref; }} onMessage={this._onMessage} ..otherProps />); 
}

// In your webview inject this code 

<script> 
    window.postMessage("Sending data from WebView"); 
</script>

谢谢，这是另一种方式来破解周围的解决方案，但我还是想知道'怎么window.close'阵营组件。 +1 –

这似乎是一个黑客，但实际上在反应母语移除'WebView'分量等于'window.close'。因此，例如打开一个'Modal'其中包含了'WebView'然后关闭'Modal'会给你为'window.close'同样的效果。 – bennygenel

如何关闭React组件中的窗口？

相关推荐