怎么使用this找到DOM节点

黑帽白客

于 2024-01-17 13:03:08 发布

阅读量405

点赞数 10

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/shrfgbfg/article/details/135647648

文章讲述了在React组件中如何通过`ref`属性的不同用法（字符串ref和callbackRef）来找到DOM节点，并演示了如何使用`scrollIntoView`方法使其可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

class MyComponent extends Component {
  componentDidMount() {
    this.node.scrollIntoView();
  }

  render() {
    return <div ref={node => this.node = node}/>
  }
}

使用字符串ref找到DOM节点

使用字符串ref的做法

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this.refs.something).scrollIntoView();
  }

  render() {
    return (
      <div>
        <div ref='something'/>
      </div>
    )
  }
}

使用callbackref的做法

class MyComponent extends Component {
  componentDidMount() {
    this.something.scrollIntoView();
  }

  render() {
    return (
      <div>
        <div ref={node => this.something = node}/>
      </div>
    )
  }
}