2017-11-29 8 views
0

stackoverflower: 私は私のサンプルコードは、ここで、非常に奇妙な問題に会った:なぜ反応コンポーネントでwindow.locationが機能しないのですか?

export default class MyAwesomeComponent extends React.Component{ 
    constructor(props){ 
     super(props) 
     this.handleClick = this.handleClick.bind(this) 
    } 

    handleClick(){ 
     //do some expression 
     window.location = 'url I want to jump' 
    } 

    render(){ 
     return <button onClick={this.handleClick}/> 
    } 
} 

が、​​を起動したときに、私のスパではなく、それは何もしなかった、URLにジャンプしません。

handleClick(){ 
    setTimeout(()=>{window.location = 'url I want to jump'}) 
} 

私がjsのシングルスレッド問題に会ったようだ、とsetTimeoutまたはnextTickが問題

を解決することができますが、あなたはこれを説明することができます。次のコードに置き換えたときの問題が解決されますか?

ところで、実行環境は、反応のような還元型のパッケージを備えたカスタマイズされたMVCの下にあります。多分、単一のスレッドがこれはそれ自体は答えの多くではなく、単に説明するために私の悩み

THX

+0

? – Aaqib

+0

実際には、ログアウトモジュールです。それは有効なURLであるログアウトページを開きます – pingfengafei

答えて

0

を引き起こしたのではなく、MVC内側の黒魔法があります。
window.locationがクライアント側で実行されるため、ご使用のサーバー環境に関係なく、コードは正常に正常に動作するはずです。あなたは `window.location`で達成しようとしているもの

class MyAwesomeComponent extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.handleClick = this.handleClick.bind(this) 
 
    } 
 

 
    handleClick() { 
 
    //do some expression 
 
    window.location = 'https://google.com' 
 
    } 
 

 
    render() { 
 
    return <button onClick={this.handleClick}>click</button> 
 
    } 
 
} 
 

 
ReactDOM.render(<MyAwesomeComponent />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

+0

ありがとうございます。あなたのコードは、私のMVCに何か間違っていることを示すかもしれませんが、反応については何も – pingfengafei

関連する問題