반응 모달 ref 정의되지 않았습니다! 사용자 정의

Question

속성을 추가 할 수 없습니다 나는 간단한 모달이 있습니다

나의 유일한 목적은에 (이 타사에서 정의되어 있기 때문에 불행하게도 데이터 -로 시작하거나 aria- 수 없습니다) 사용자 지정 특성을 주입하는 것입니다

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> 
    ); 
    } 

나는 사용자 지정 특성 주입 할 때 div는 ref="test"

에 의해 참조 :

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

다음

요소가 너무 setAttribute 항상 정의되지 않은 실패를; 요소를 검사하면 <div>에 ref="test"이 없습니다! 누군가가이 심판이 모달 안에없는 이유에 관해 나를 도울 수 있습니까?

Answer 1

코드를 ComponentDidMount 또는 ComponentDidUpdate 방법으로 이동해보십시오. 참조가 정의되지 않아야합니다.

<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'); 
}