Question

我正在尝试使用Jquery的header方法获取height()元素的高度。 但是当我控制值时，它会给出NAN

这是我的反应片段

import React, { Component } from "react";
import $ from 'jquery'; //un-used

export default class HomepageNavigationBar extends Component {

  render() {
    return (
      <header className="header_area">
        <div className="main_menu">
          <nav className="navbar navbar-expand-lg navbar-light">
            <div className="container">
              <a className="navbar-brand logo_h" href="index.html">
                <img src="img/logo.png" alt="" />
              </a>
              <button
                className="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span className="icon-bar" /> <span className="icon-bar" />
                <span className="icon-bar" />
              </button>
              .
              .
              .
              //dots used to denote that code further exists but to make this minimal I have removed them.
        </div>
      </header>
    );
  }
}

这是我的外部theme.js文件

(function($) {
  "use strict";

  var nav_offset_top = $("header").height() + 50;

  console.log(nav_offset_top); //gives 'NAN' when console, even after I scroll

  function navbarFixed() {
    if ($(".header_area").length) {
      $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= nav_offset_top) {
          alert('Hi');
          $(".header_area").addClass("navbar_fixed");
        } else {
          alert('no Hi');
          $(".header_area").removeClass("navbar_fixed");
        }
      });
    }
  }
  navbarFixed();  
})(jQuery);

问题是：

1）

 console.log(nav_offset_top);

即使在我上下滚动页面后，上面的代码也会在控制台提供NAN值

2）

$(".header_area").length

header_area的长度始终为0，即使我上下滚动页面

这里有人可以帮我吗？

Answer 1

我相信您会收到NaN，因为您正在访问header时尚未呈现。

将您的代码放入componentDidMount()中，以确保在访问元素之前先渲染它们。

了解详情： https://reactjs.org/docs/react-component.html#componentdidmount

文档指出：

需要DOM节点的初始化应该在这里。

这正是您在做的事情，使用jQuery访问DOM节点。

class HomepageNavigationBar extends React.Component {
  componentDidMount() {
    var nav_offset_top = $("header").height() + 50;

    console.log(nav_offset_top);
    
    function navbarFixed() {
    if ($(".header_area").length) {
      $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= nav_offset_top) {
          alert('Hi');
          $(".header_area").addClass("navbar_fixed");
        } else {
          alert('no Hi');
          $(".header_area").removeClass("navbar_fixed");
        }
      });
    }
  }
  navbarFixed();  
  }
  render() {
    return (
      <header className="header_area">
        <div className="main_menu">
          <nav className="navbar navbar-expand-lg navbar-light">
            <div className="container">
              <a className="navbar-brand logo_h" href="index.html">
                <img src="img/logo.png" alt="" />
              </a>
              <button
                className="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span className="icon-bar" /> <span className="icon-bar" />
                <span className="icon-bar" />
              </button>
            </div>
          </nav>
        </div>
      </header>
    );
  }
}

ReactDOM.render(<HomepageNavigationBar />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" style="height: 1000px;"></div>

如何使用JQuery访问ReactJS DOM元素

1 个答案: