问题描述
我正在使用react-calendar-timeline(https://www.npmjs.com/package/react-calendar-timeline)。我需要添加一个自定义弹出窗口,其中将包含所有详细信息以及用于对其进行更新的表单。我可以在其中传递渲染方法的任何道具吗?
解决方法
在检查react-calendar-timeline打开问题之后,我知道它不支持自定义弹出窗口以显示其他数据。但是有一种解决方法可以实现,即itemRenderer。
这是骨骼。将以下代码放在单独的组件中。
<div
{...getItemProps({
style: {
background,color,borderColor,boxShadow,borderStyle: "solid",borderWidth: 1,borderRadius: 4,borderLeftWidth: itemContext.selected ? 3 : 1,borderRightWidth: itemContext.selected ? 3 : 1
}
})}
onMouseEnter={() =>{
this.setState({ showModal: true })
}}
onMouseLeave={() =>{
this.setState({ showModal: false })
}}
onClick={() =>{
this.setState({ showModal: false })
}}
>
<div
style={{
height: itemContext.dimensions.height,overflow: "hidden",marginLeft: '10px',paddingLeft: 3,textOverflow: "ellipsis",lineHeight: '20px',marginTop: '15px'
}}
>
{itemContext.title}
</div>
{this.state.showModal &&
<div className="itemModal" style={{
left: left,right: right
}}>
**modal content goes here**
</div>
}
</div>
并将其传递到时间轴的itemRenderer属性中。
这对我有用。 P.S通过每个资源的唯一ID分别处理模式
谢谢