问题：react 生命周期函数 componentDidMount 为什么不能保证可以拿到真实的dom？
示例代码：
componentDidMount(){
console.log(this.test) //大概率会得到null
}
render(){
return(
<div ref={(test) => {this.test = test}}>123<div>
)
}
已解决
悬赏分：20
- 解决时间 2021-11-24 20:37
点赞 0反对 0举报 0
收藏 0
分享 2
回答2
最佳
-
回答
React 保证在 componentDidMount 和 componentDidUpdate 之前设置 refs，但仅仅是在确定子组件已经渲染后。
以下情况都有可能无法立即获取到 refs
1) 设置条件渲染
render() { if (this.state.isLoading) { return <h1>Loading</h1>; } return <div ref={this._setRef} />; }2）子组件包裹造成未渲染。
<MyComponent> <div ref={this.setRef} /> </MyComponent> function MyComponent(props) { // 未渲染子组件 return <h1>Oops, no refs for you today!</h1>; }3) 使用 ReactDOM.render 嵌套渲染
<MyModal> <div ref={this.setRef}></div> </MyModal> function MyModal() { componentDidUpdate() { ReactDOM.render(this.props.children, $dom) } render() { return null; } } // 这种情况可以使用 createPortal render() { return ReactDOM.createPortal(this.props.children, $dom) }总结出来就一句话：设置 ref 的组件或者元素渲染之后才能获取到对应的 ref
支持 0 反对 0 举报2021-11-24 07:51
