时间戳

首页 > 解决方案 > 如何告诉 React 组件调用它的 HTML 页面是活动的

javascript - 如何告诉 React 组件调用它的 HTML 页面是活动的

问题描述

我正在尝试使用 React 和 Angular 指令重用我的 HTML 导航栏，但我对如何处理它有点困惑

这是我的导航栏.html：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="home.html">Home <span class="sr-only">(current)</span> </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="source.html">Source</a>
      </li>
    </ul>
  </div>
</nav>

这是我的 AngularJS：

var app = angular.module("myApp", []);

app.directive("NavBar", function() {
    return {
        templateUrl : 'navigationbar.html'
    };
});

在我所有的 HTML 文件中，我可以很好地调用这个导航栏，但问题是我不知道如何<span class="sr-only">(current)</span>根据哪个 html 页面调用导航栏来将“活动”类放置在正确的 html 页面上。当用户在联系页面上时，如何将标签移动到contact.html？

我正在考虑使用 React，如下所示：

render() {
if (this.state.active ???) {
  return <span class="sr-only">(current)</span>;
}

但我不确定如何设置条件。

谢谢！

标签： javascripthtmlreactjs

解决方案

在 React 应用程序中，如果您有一段数据会影响整个应用程序，您通常会将这些数据放在“状态变量”中，即应用程序的最高组件中，即。你用 . 渲染的那个ReactDOM.render。通常（例如在create-react-app）这个组件被称为App。

然后使用上下文或道具，您需要将该状态变量传递给使用它的任何组件（例如您的菜单）。这样，每当您需要“更改页面”时，您只需更改该状态，然后您的组件将根据它自动更新自己。

推荐阅读