• react用ref之坑 (react中findDOMNode)


    今天在开发的时候自定义的组件一直选不中元素,查了许久,终于弄明白了

    看到了项目中的findDomNode查了一下,如下:

    import { findDomNode } from 'react-dom';

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

    getNodeInstance() {
        const tableDom = findDOMNode(this.table.current) as Element
    }   
    function WapShop() {
        return (
            <div>
                  <Ant_Table ref={this.table} />
            </div>
        );
    }
    

    这里的tableDom就是一个Ant_Table的实例,但是如果这样: 
     此时initailNode会得到Ant_Table组件中render方法返回的dom元素。
    let initialNode = findDomNode(this.refs.table);
    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进行调用

  • 相关阅读:
    2019 SDN阅读作业
    第10组 Alpha冲刺(4/6)
    第10组 Alpha冲刺(3/6)
    2019 SDN上机第3次作业
    团队Beta4
    团队Beta3
    团队Beta2
    团队Beta1
    tuandui last
    团队Arpha6
  • 原文地址:https://www.cnblogs.com/wufenfen/p/15099209.html
Copyright © 2020-2023  润新知