现在不推荐使用 ReactDOM.findDOMNode() 的替代方法是什么?

IT技术 reactjs ref refs
2021-05-15 05:44:13

我有一个旧代码正在使用findDOMNode().

这是我的代码,其中someComponent1Expand已经导入。

在这里,我有些怀疑我编写的代码findDOMNode()是否运行良好,但由于它现在已被弃用,我想将其删除。我浏览了许多文档,发现使用门户网站或参考文献而不是这个。我有一个理解,如果我使用 ref,那么变量 get bind 也可以访问 DOM 元素,但我想我错了,因为它以这种方式工作。有人可以纠正我对此的理解吗

class classA extends Component {

  componentDidMount() {
    new Expand(ReactDOM.findDOMNode(this.expand))
    // new Expand(this.expand)    
  }

  render(){

    return(
      <someComponent1 className={style.container} ref={e => this.expand= e}/>
    )
  }
}
1个回答

根据这个 github 问题ReactDocsReactDOM.findDOMNode不推荐使用,但不鼓励使用它,只能用作逃生舱。为了替换它,您需要在 DOM 元素上指定 ref 在您的情况下看起来像

class classA extends Component {

  componentDidMount() {
     new Expand(this.expand)    
  }

  render(){

    return(
      <SomeComponent1 className={style.container} innerRef={e => this.expand= e}/>
    )
  }
}

class SomeComponent1 extends React.Component {
    render() {
       return <div ref={this.props.innerRef}>Hello</div>
    }
}