Question

我最近尝试在React中创建动态样式的Bootstrap 4 Navbar，同时专门使用本机Bootstrap 4组件，而不必依赖于react-bootstrap或reactstrap等。

起初，当我使用一个名为ScrollPosStyler的脚本来创建一个像“Bootstrap 3”这样的“附加顶部”导航栏时，我没有遇到任何问题，因为我没有遇到任何问题，Bootstrap 3在顶部有一个透明背景页面滚动时页面和深色背景。

但是，我想原生地使用bg-dark和bg-transparent而不是sps类，所以我创建了一个基于“attrchange”jQuery插件的监听器，看起来像这样：

$('nav.sps').each(function() {
  var elem = $(this);

  elem.attrchange({
    trackValues: true,
    callback: function(e) {
      if (e.attributeName == "class") {
          if (e.newValue.search("sps--abv") != -1) {
            elem.removeClass("bg-dark");
            elem.addClass("bg-transparent");
          } else if (e.newValue.search("sps--blw") != -1) {
            elem.removeClass("bg-transparent");
            elem.addClass("bg-dark");
          }
        }
      }
    }
  });

});

然而，我也尝试为滚动时变暗的轻型导航栏实现相同的功能，此时我遇到了我的主要问题。

我添加了一个函数，它为我在各种路径中使用的每个Navbar分配了“颜色”道具，并根据道具的值添加了适当的类，看起来非常类似于此：

appropriateNavbarClass(props) {
    switch (props.color) {
        case "transparent":
            return "navbar-dark bg-transparent sps sps-t";
            break;
        case "light":
            return "navbar-light bg-light sps sps-l";
            break;
        case "dark":
        default:
            return "navbar-dark bg-dark";
            break;
    }
}

// and further down in render()
<nav class={"[standard navbar classes] " + this.appropriateNavbarClass(this.props)}>

相应的“sps-？”然后使用类来更新我的“attrchange”监听器，因此它现在相应地添加和删除 bg-transparent 或 bg-light 。

起初，我没有注意到这个代码有任何问题，直到我在页面中切换路由：切换后，我需要向下滚动一点然后一直到页面顶部ScrollPosStyler到拿起新渲染的导航栏元素。我已经尝试在使用ScrollPosStyler.init();进行路由更新后手动初始化sps，但遗憾的是这只导致“未定义ScrollPosStyler”（注意：我尝试了所有可用的语法[es6 import，commonjs require，底部的脚本标记]的页面]，但它从来没有以任何方式解决）

与往常一样，如果您需要提供任何其他代码或信息来回答问题，请随时问我，我很乐意这样做。另外，我非常感谢所有改进我的代码和/或编码习惯的建议，例如缩小我的attrChange监听器或简化导航栏着色。

React Route更改后自定义脚本无法正常工作

0 个答案: