Question

stackoverflower：我遇到了一个非常奇怪的问题，这是我的示例代码：

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}/> 
   }
}

但是当调用handleClick时，我的水疗中心不会跳转到网址，相反，它什么也没做。用以下代码替换时，问题就解决了：

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

我似乎遇到了js单线程问题，setTimeout或nextTick可以解决问题

你可以解释一下吗？

顺便说一下，运行环境是一个定制的MVC，具有类似反应的类似redux的包。也许是MVC内在的黑魔法而非单线程导致我的麻烦

thx

Answer 1

这本身并不是一个答案，只是为了说明无论您拥有什么样的服务器环境，您的代码都应该可以正常运行，因为window.location在客户端运行。

＆＃13;

 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'));

＆＃13;

<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>

＆＃13;

为什么window.location在我的react组件中不起作用？

1 个答案: