Question

点击后可以渲染和追加新组件吗？我有我的日历组件

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。

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

然后单击后渲染然后添加新组件

2 个答案: