Question

所以，我有一个主菜单的react组件。

它是指向不同页面的反应路由器<Link/>的列表。每个链接都会检查window.location.path以确定它是否是活动页面，以便活动菜单项可以呈现不同的外观。

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import List from "@material-ui/core/List";

class MainMenu extends Component {
  render() {
    return (
      <List>
        <Link to="/products" className={window.location.pathname === "/products" ? "active" : null }>Products</Link>
        <Link to="/sales" className={window.location.pathname === "/sales" ? "active" : null }>Sales</Link>
      </List>
    )
  }
}

这实际上工作正常，但是我现在想将此菜单组件连接到我的redux存储，以便在我添加菜单connect后可以在菜单内显示存储中的一些数据中断，以使在更改页面时不会应用“活动”类。即，即使though window.location.pathname已更改，组件也不会更新。

我没有包含我的商店代码，因为我已经使用了无能为力的虚拟化简器对其进行了测试，并且甚至还没有在组件中的任何地方使用数据。

export default connect(state => ({ foo: state.bar }))(MainMenu);

我仍然不确定这个问题是与连接有关，还是连接只是突出显示了使用window.location.pathname的问题，并且反应不知道何时更新。

非常感谢您的帮助！

Answer 1

视图的this.state发生任何更改时，视图也会更改。零件。我建议您听听window.location的变化

这是代码

constructor(){
   this.state = {currentPath:window.location.pathname}

   window.onbeforeunload = function(e) {
      this.setState({currentPath:window.location.pathname})
   };
}

和render（）

render() {
    return (
      <List>
        <Link to="/products" className={this.state.currentPath === "/products" ? "active" : null }>Products</Link>
        <Link to="/sales" className={this.state.currentPath === "/sales" ? "active" : null }>Sales</Link>
      </List>
    )
  }

Answer 2

更改window.location.pathname时，不会重新渲染反应组件。仅状态更改将导致组件重新呈现。您需要监听window.pathname的变化并将其映射到state，然后只有您的组件会重新呈现

对于这类事情，您可以看一下react-router。将其添加到您的项目中，这样的事情就可以轻松实现。

https://reacttraining.com/react-router/core

React组件未在window.location更改时重新呈现

2 个答案: