レンダリングした後、新しいコンポーネントを追加した後に

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