我正在将React与Electron一起使用。当我在按钮中使用这样的路由器时,在构建react项目并用电子将其编译之后,运行React项目即可工作:
const ButtonNo = withRouter(({ history }) => (
<button className="wizardbuttons"
type='button'
onClick={() => { history.push('/Institution') }}
>
Skip Setup
</button>
))
但是,我有一些ajax和jquery方法,在返回成功后,我想使用它们进行导航。当我使用window.location转到另一个页面时,它可以很好地与react一起工作,但是当我在电子环境中运行它时,我会得到一个空白页面。
$("#submit").click(function() {
$.post("address",
{
// Post data
},
function (data, status) {
if (status == 'success') {
//nav to screen on success
//works with react but gives a blank page with electron
window.location = "./PageIWantToGoTo";
}
});
}
});
我如何响应React与电子结合的ajax成功?我怀疑在不使用withRouter时电子会错误地处理路径。
答案 0 :(得分:0)
首先,绑定您的ajax。
$.ajax({
type: 'POST',
url: "path",
headers: {
},
data: {
},
success: function(data) {
this.setState({
successfullmessage: true
});
}.bind(this),
error: function(errMsg) {
console.log(errMsg);
}.bind(this),
});
在这样的内容中:
super(props);
this.state = {
successfullmessage: false
}
this.submitclick = this.submitclick.bind(this);
submitclick() {
// ajax here
}
然后,您可以在ajax函数成功的内部使用this.setState。
接下来,要在返回之前在render(){}中导航,您可以执行以下操作:
if (this.state.successfullmessage) {
return <Redirect to="/MainMenu" />;
}
因为您已经更新了状态,所以只要布尔值已设置为true,React就会自动重新渲染并执行Redirect。这将对电子有效,因为反应重定向提供了与电子兼容的路径。