javascript - 如何使用 JQuery 访问 ReactJS DOM 元素

Question

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

这是我的 react 片段

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

文档指出:

Initialization that requires DOM nodes should go here.

这正是您正在做的事情，使用 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>