React : 부모로부터 하위 구성 요소의 모달 닫기

Question

상위 구성 요소에서 삭제 기능을 처리하는 하위 구성 요소에 모달이 있습니다. 이것이 모달의 가장 논리적 인 장소 인 것처럼 모달의 상태 (열린 상태 또는 닫힌 상태)를 유지하고 있습니다. removeItem 코드가 실행 된 후

부모

removeItem() { 
    console.log('clicked'); 
    }; 

... 

<DeleteButton deleterecord={()=>this.removeItem(data.row._original._id)}/> 

아이

close() { 
    this.setState({ showModal: false }) 
}; 

open() { 
    this.setState({ showModal: true }) 
}; 


render() { 

return(
    <div> 
    <Button 
    bsStyle="primary" 
    bsSize="small" 
    onClick={this.open.bind(this)} 
    > 
    Delete 
    </Button> 

    <Modal 
    show={this.state.showModal} 
    onHide={this.close.bind(this)} 
    bsSize="small" 
    > 
    ... 

어떻게 부모로부터 모달을 닫아야합니다.

Answer 1

ref를 사용하여 하위 닫기 함수를 호출 할 수 있습니까?

부모

removeItem() { 
     console.log('clicked'); 
     this.child.close(); 
    } 

    render() { 
     return (
     <div> 
      <ChildWithModal ref={(ref) => { this.child = ref; }} /> 
     </div> 
    ); 
    } 

아이

... 

close() { 
    this.setState({ showModal: false }) 
};