렌더링 후 클릭 후 새 구성 요소를 추가하십시오.

Question

클릭 후 새 구성 요소를 렌더링하고 추가 할 수 있습니까? 난 내가 JsWindow를 제거하려면 닫기를 클릭 아이콘 후에 나의 jsWindow 구성 요소

render(){ 
    return (
     <div className="js-window"> 
     {console.log(this.props)} 
      <Icon icon={close} className="closeBtn" size={24} onClick={(e)=>e.target.parentNode.parentNode.remove()}/> 
      {this.props.children} 
     </div> 
    ) 
} 

렌더링하려면 내 달력 구성 요소

return (
    <span 
    key={date.toString()} 
    className={"day" + (isToday ? " today" : "") + (isCurrentMonth ? "" : " different-month") + (date.isSame(selected) ? " selected" : "")} 
    onClick={()=>select(day)}>{number}</span> 
); 

onclick을 가지고있다.

Answer 1

조건부 렌더링을 사용할 수는 :

{ condition && <Component /> } 

Answer 2

구성 요소 상태에서 선택한 날짜에 넣고 그에 따라 구성 요소를 렌더링합니다. 클릭시 상태를 설정하거나 재설정하면 재 렌더링이 트리거됩니다.

기본 예제는 시작하려면 :

state = { 
    day: undefined 
} 

selectDay = day => { 
    this.setState({day}); 
}; 

resetDay =() => { 
    this.setState({day: undefined}); 
}; 

render(){ 
    const day = this.state.day; 
    return day ? (
      <div className="js-window"> 
       <Icon icon={close} className="closeBtn" size={24} onClick={this.resetDay}/> 
       {this.props.children} 
      </div> 
     ) : (
      <span key={date.toString()} className={} onClick={()=>this.selectDay(day)}>{number}</span> 
     ) 
    ) 
}