时间戳

首页 > 解决方案 > 如何使用 JQuery 访问 ReactJS DOM 元素

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

问题描述

我正在尝试header使用 Jquery 的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_area0即使在我上下滚动页面后，长度也总是

这里有人可以帮我吗？

标签： javascriptjqueryreactjs

解决方案

我相信您正在获得，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>

推荐阅读