Question

我有一个导航链接的代码，它或多或少只是处理显示活动状态。

这很完美！我的问题是：为什么？正如您所看到的，我正在根据与此链接的url匹配的window.location.pathname来检查链接是否应该处于活动状态。在render函数中，我检查此链接是否处于活动状态（调用activeIndicator（）时）。

似乎是随时window.location.pathname更新的情况，这会重新呈现。当组件内部的变量发生任何变化时，React的生命周期方法shouldComponentUpdate（）会以某种方式更新吗？值得注意的是，我在我的应用程序中使用React Router并单击链接会触发React Router。

这样做不安全还是脆弱？跟踪容器中的状态一定会更好吗？或者手动覆盖shouldComponentUpdate（）？

非常感谢任何关于如何“神奇地”工作的信息！

谢谢！

const Navlink = ({text, url}) => {

  const isActive = () => {
    return window.location.pathname === url;
  }

  const activeIndicator = () => {
    if( isActive() ) {
      return (
        <div className="active-indicator">
          <svg height="6" width="6">
            <circle cx="3" cy="3" r="3" fill="black" />
          </svg>
        </div>
      );
    }

    return null;
  }

  return (
    <span className="navbar-link">
      <Link to={ url } style={ (isActive()) ? {color:"black"} : {} }>
        { text }
      </Link>
      { activeIndicator() }
    </span>
  );
}

更新

为了更好地理解答案，可能有助于理解Navlinks是如何嵌套的。

顶级：

<Router>
  <Main />
</Router>

主：

<div>
  <Navbar />

  <Route exact path="/" component={Home} />
  ...

导航链接位于Navbar内。

Answer 1

值得注意的是，我正在使用React Router 应用程序并单击链接会触发React Router。

这是你的答案！路由到路由器时，路由器sends updated props to your components。因此，当您触发链接时，它会使用一些触发渲染的道具路由到组件。

当非支柱或状态变量发生变化时，React如何知道渲染组件？

1 个答案: