zoukankan      html  css  js  c++  java
  • react中findDOMNode

    在使用react过程中,大家有时会
    那么这里的findDomNode是做什么的呢?

    import { findDomNode } from 'react-dom';

      简单来说是用来得到实际Dom的,因为react组件有个特点,它有自定义组件,比如<NavBox/>这种,用ref来获取这种组件获取到的这是组件定义的对象的实例,见下面代码

    getNodeInstance() {

        const nodeInstance = this.refs.navBox;

    }   





    function WapShop() {

        return (

            <div>

                  <NavBox ref="navBox" />

            </div>

        );

    }

      这里的nodeInstance就是一个NavBox的实例,但是如果这样:  此时initailNode会得到NavBox组件中render方法返回的dom元素。

    let initialNode  =  findDomNode(this.refs.navBox);
    reactJs对DOM的操作
    1. 使用选择器

    var Btn = document.getElementById('btn')
    ReactDom.findDOMNode(Btn).style.color = 'red'
    2. 使用ref

    在标签内使用ref='btn'

    this.refs.btn.style.color = 'red'
    Refs 是访问到组件内部DOM节点唯一可靠的方法 
    注意:不要在render或render之前对Refs进行调用

  • 相关阅读:
    JavaScript常见注意点(一)
    jspServlet2.5和Servlet3的区别
    jspMVC案例
    jQuery入口函数的写法
    Servlet 简介
    jspMVC设计模式和Servlet2.5入门案例
    display 属性
    JSON简单使用
    Tomcat修改端口号
    php开发环境简单配置
  • 原文地址:https://www.cnblogs.com/jcxfighting/p/10414643.html
Copyright © 2011-2022 走看看