单击后渲染然后附加新组件答案

【问题标题】：Render then append new component after click单击后渲染然后附加新组件
【发布时间】：2018-05-17 22:09:32
【问题描述】：

是否可以在单击后渲染和附加新组件？我有我的日历组件

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

onClick 我要渲染我的 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>
    )
}

点击关闭图标后，我想删除 JsWindow。

【问题讨论】：

而是使用状态来使 jsWindow 组件切换外观。切换日历组件中的状态

标签： javascript reactjs events

【解决方案1】：

将选定的日期置于组件状态并基于此呈现您的组件。单击时您设置或重置状态，这将触发重新渲染。

帮助您入门的基本示例：

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

【讨论】：

【解决方案2】：

您可以使用条件渲染：

{ condition && <Component /> }

【讨论】：