0x000 概述
不到必要不要在React
中访问Dom
,尝试使用React
的思想去解决问题。当然,必要的时候还是可以的,比如某些依赖Dom
的组件
0x001 时机
在React
中,并不是任何时候都可以访问Dom
的,需要讲究时机。因为React
中的组件存在生命周期
,必须要在Dom
挂载之后的生命周期才能访问到Dom
,也就是componetnDidMount
之后
-
栗子:
class App extends React.Component { constructor() { super() console.log('constructor', document.getElementById('cool')) } componentDidMount() { console.log('componentDidMount', document.getElementById('cool')) } render() { return <div id='cool'> Dom </div> } }
- 输出:
0x002 访问方式
- 传统方式
传统方式就是上面栗子中那般,直接在componentDidMount
之后使用传统方式访问 -
refs
ref
有两种方式-
ref
属性绑定变量,这种方式需要先调用React.createRef
创建一个ref
,然后在componentDidMount
之后的生命周期中使用this.myRef.current
来访问。class App extends React.Component { constructor() { super() this.myRef = React.createRef(); } componentDidMount() { const node = this.myRef.current; console.log('componentDidMount',node) } render() { return <div ref= {this.myRef}> Dom </div> } }
效果
-
绑定函数,更简约一点,可以直接使用
myRef
访问class App extends React.Component { constructor() { super() } componentDidMount() { console.log('componentDidMount',this.myRef) } render() { return <div ref= {(e)=>this.myRef=e}> Dom </div> } }
效果
-
0x003 总结
不到必要不要在React
中访问Dom
,尝试使用React
的思想去解决问题。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。