Question

我试图根据我的React App中的当前路径设置导航栏链接的样式，如果该路径是/ create或/ add，则应更改其样式。到目前为止，这是我的标头组件中的内容：

          <div
            id="createLink"
            className={this.state.createClassName}
            onClick={() => this.handleModalToggle()}
          >
            CREATE
          </div>


  handleActiveLink= () => {
    let path = this.props.location.pathname
     if (path === "/add" | path === "/create") {
       this.setState({createClassName: "nav-link-active"})
     } else {
       this.setState({ createClassName: "nav-link" })
     }
  };

  componentDidMount() {
    this.handleActiveLink()
  }

这有效，但只有在刷新页面后才有意义，但这不是我想要的。因此，我正在寻找一种方法，甚至在渲染之前更改className并首先获取路径（我正在从react-router-dom中使用withRouter）

Answer 1

问题似乎是您仅在安装组件时检查路径，而不在更新时检查路径。您还应该签入componentDidUpdate

handleActiveLink= () => {
  let path = this.props.location.pathname;
  if (path === "/add" || path === "/create") {
    this.setState({createClassName: "nav-link-active"});
  } else {
    this.setState({ createClassName: "nav-link" });
  }
};

componentDidMount() {
  this.handleActiveLink();
}

componentDidUpdate() {
  this.handleActiveLink();
}

在这种情况下，我建议不以状态存储此类瞬态数据，并简单地从props派生并在render函数中（或任何地方）设置为className您渲染它）。这样，它将计算每个渲染何时 UI都会被更新，并且将始终保持最新状态（即，您无需担心生命周期功能）。

render() {
  const { location: { pathname } } = this.props;
  const linkClass = ["/add", "/create"].includes(pathname)
    ? "nav-link-active"
    : "nav-link";

  ...

  <div
    id="createLink"
    className={linkClass}
    onClick={() => this.handleModalToggle()}
  >
    CREATE
  </div>
  ...
}

根据路线反应路由器导航栏

1 个答案: