我正在使用react-calendar-timeline(https://www.npmjs.com/package/react-calendar-timeline)。我需要添加一个自定义弹出窗口,其中包含所有详细信息和一个用于更新它的表单。我可以在其中传递渲染方法的任何 Prop 吗?
最佳答案
检查react-calendar-timeline open issues后,我发现它不支持自定义弹出窗口来显示附加数据。但有一种解决方法可以实现同样的效果,那就是 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 单独处理模式
谢谢
关于reactjs - 如何在react-calendar-timeline中添加自定义弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63375317/