Reactjs 如何在react calendar timeline中添加自定义popover
我正在使用react-calendar-timeline()。我需要添加一个自定义的popover,它将有所有的细节和一个表单来更新它。任何我可以在其中传递渲染方法的道具?在检查react calendar timeline open issues后,我知道它不支持显示其他数据的自定义popover。但有一种解决方法可以实现同样的效果,那就是itemRenderer 这是骨架。将下面的代码放在单独的组件中Reactjs 如何在react calendar timeline中添加自定义popover,reactjs,typescript,calendar,timeline,Reactjs,Typescript,Calendar,Timeline,我正在使用react-calendar-timeline()。我需要添加一个自定义的popover,它将有所有的细节和一个表单来更新它。任何我可以在其中传递渲染方法的道具?在检查react calendar timeline open issues后,我知道它不支持显示其他数据的自定义popover。但有一种解决方法可以实现同样的效果,那就是itemRenderer 这是骨架。将下面的代码放在单独的组件中 <div {...getItemProps({ style: {
<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>
{
this.setState({showmodel:true})
}}
onMouseLeave={()=>{
this.setState({showmodel:false})
}}
onClick={()=>{
this.setState({showmodel:false})
}}
>
{itemContext.title}
{this.state.showmodel&&
**模态内容在这里**
}
并将其传递到时间轴的项目中
这对我有用。
PS通过每个资源项的唯一ID分别处理模式
谢谢