react中使用antd的modal模块,想要在modal中拿到一个dom元素该怎么拿

想要在modal中嵌入一个插件,但是需要拿到dom节点标签,该怎么拿到
ref和ReactDOM.findDOMNode方法都已经试过了,得到的结果都是null

父组件:
<AddUserWin ref="AddUserWin" visible={state.visible} title={state.title} hideModal={me.hideModal} record={state.record}
canEdit={state.canEdit}/>

子组件modal模块:
<Modal title={props.title} visible={props.visible} onCancel={this.handleCancel} width="900" footer={modalBtns} >

      <Form horizontal  form={this.props.form}>
          <FormItem>
              <div ref={(ref) => this._div = ref}></div>
              //或者下面这种方式都已经试过
              <div ref='edit'></div>
          </FormItem>
      </Form>
  </Modal>
  

我在子组件的componentDidMount和父组件的componentDidMount以及父组件的modal方法中使用
var editor = ReactDOM.findDOMNode(this._div)或者this.refs.edit都是null
我已经试过当写在modal外面是可以拿到的,代码如下:
<div>

  <Modal title={props.title} visible={props.visible} onCancel={this.handleCancel} width="900"  footer={modalBtns} >
      <Form horizontal  form={this.props.form}>
          <FormItem>
              
          </FormItem>
      </Form>
  </Modal>
  <div ref={(ref) => this._div = ref}></div>
  </div>

这时候ref的div是可以拿到的,但是我需要的实在modal里面,请问大佬有什么方法
期待拿到dom标签元素,实际得到的是null
PS:卡在项目的进度中了,目前很急,希望得到您的帮助,如能解决问题可提供小额红包请您喝一杯咖啡~感谢!

阅读 5.1k
评论
    4 个回答
    • 3.4k

    初始化的时候获取不到是因为你一直都在componentDidMount中获取Modal内的dom结构,而目前的react,componentDidMount只会在组件的生命周期内执行一次,它执行的时候Modal组件还未渲染,自然获取不到它其中的DOM结构。

    知道原因了,就可以想,既然Modal是visibile属性为true的时候才渲染,那么自然不能在最开始的时候去获取DOM,所以必定要在组件更新的时候去获取,所以可以在componentDidUpdate函数内去获取DOM结构。我试了一下,第一次的时候也是拿不到DOM,感觉是由于动画或者其他原因,但感觉要等到主线程完事再去获取,渲染Modal的方法应该是在主线程里,那么就可以用setTimeout来把获取DOM元素的逻辑放到异步队列中。这样应该就可以获取到了,你试试,我试过可以获取,如图。

    图片描述

    图片描述

      相似问题
      推荐文章