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进行调用

  • 相关阅读:
    [erlang 002]gen_server中何时会跑到terminate函数
    设计模式:桥接模式
    设计模式:组合模式
    Harbor:镜像上传和下载
    Harbor:简介和安装
    Docker:compose
    ThinkPHP的静态化页面方法
    php使用memcached详解
    大话PHP设计模式
    PHP魔术方法使用
  • 原文地址:https://www.cnblogs.com/jcxfighting/p/10414643.html
Copyright © 2011-2022 走看看