1

我最近尝试在 React 中创建一个动态样式的 Bootstrap 4 导航栏，同时专门使用本机 Bootstrap 4 组件，而不必依赖诸如 react-bootstrap 或 reactstrap 之类的东西。

起初，这很有效，因为当我使用名为 ScrollPosStyler 的脚本创建一个像 Bootstrap 3 一样的“affix-top”导航栏时，我没有遇到任何问题，该导航栏在页面顶部时具有透明背景，并且滚动页面时的深色背景。

但是，我想在本地使用 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");
          }
        }
      }
    }
  });

});

但是，我也尝试为滚动时变暗的浅色导航栏实现相同的功能，此时我遇到了主要问题。

我添加了一个函数，该函数采用我分配给各种路线中使用的每个导航栏的“颜色”道具，并根据道具的值添加了适当的类，看起来与此非常相似：

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 拿起新渲染的导航栏元素。我已经尝试在路由更新后手动初始化 sps，ScrollPosStyler.init();但不幸的是，这只导致“未定义 ScrollPosStyler”（注意：我尝试了所有可用的语法 [es6 import, commonjs require, script tag at the bottom of the page]，但它从来没有以任何方式解决）

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

4

0 回答 0