React中使用 ref 和 findDomNode

• Z时代
• 2024-01-10
• 分类：综合

对于 React 组件来说，refs 会指向一个组件类的实例，所以可以调用该类定义的任何方法。

如果需要访问该组件的真实 DOM，可以用 ReactDOM.findDOMNode 来找到 DOM 节点，但我们并

不推荐这样做。因为这在大部分情况下都打破了封装性，而且通常都能用更清晰的办法在 React

中构建代码。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Comp extends Component {
    inner() {
      console.log('inner')
    }
render() {
        return (
          <div>
            <input type="input"/>
          </div>
        )
    }
}
class App extends Component {
    constructor () {
      super()
    }    
    componentDidMount () {
      const myComp = this.refs.myComp;
      myComp.inner();  //访问子组件的函数
      const dom = ReactDOM.findDOMNode(myComp);
      dom.childNodes[0].value = 'hello';
      dom.childNodes[0].focus();
    }
    render() {
        return (
          <div>
            <Comp ref="myComp" />
          </div>
        );
    }
}
export default App;

以上是 React中使用 ref 和 findDomNode 的全部内容， 来源链接： utcz.com/z/383843.html