React Modal ref未定义！不能添加自定义属性

Question

我有一个简单的模式：

renderModalForm() { 
    return (
     <Modal 
     closeTimeoutMS={150} 
     show={this.state.isModalOpen} 
     onHide={this.isModalOpen.bind(this)} 
     > 
     <Modal.Body> 
      <div className="close-button-modal"> 
      <i className="fa fa-times fa-2x pull-right" onClick={this.onButtonClick.bind(this)}></i> 
      <div className="clearfix"></div> 
      </div> 
      <div ref="test" className="testclassname"> 
      </div> 
     </Modal.Body> 
     </Modal> 
    ); 
    } 

我的唯一目标是注入的自定义属性（可惜不能与数据 - 启动或aria-，因为它是由第三方定义的）到div通过ref="test"

引用当我试图注入自定义属性：

someButtonClicked() { 
    setTimeout(() => { 
     this.setState({ 
     isModalOpen: true 
     }) 
    }, 100); 
    var element = ReactDOM.findDOMNode(this.refs.test); 
    element.setAttribute('doku-div', 'form-payment'); 
} 

这里元素始终是不确定的，所以setAttribute失败;如果我去检查元素，ref="test"不存在于<div>！有人可以帮我了解为什么这个参考文件在模态内缺失吗？

Answer 1

尝试将您的代码移动到ComponentDidMount或ComponentDidUpdate方法。那里的参考文件不应该被定义。

你也可以使用一个回调来存储到DOM节点的引用：

<Modal.Body> 
      <div className="close-button-modal"> 
      <i className="fa fa-times fa-2x pull-right" onClick={this.onButtonClick.bind(this)}></i> 
      <div className="clearfix"></div> 
      </div> 
      <div ref="{(testNode) => { this.testNode = testNode; }}" className="testclassname"> 
      </div> 
</Modal.Body> 

，然后使用该引用，而不是使用ReactDOM：

someButtonClicked() { 
    setTimeout(() => { 
     this.setState({ 
      isModalOpen: true 
     }) 
    }, 100); 

    var element = this.testNode; 
    this.testNode.setAttribute('doku-div', 'form-payment'); 
}