我正在创建一条垂直的时间线，当您沿时间线移动时，卡片的两边会交替出现，我正在尝试添加弹出效果，以显示有关填充时间线上相对空白的人物/事件的更多信息。
我正在尝试通过在地图回调中使用三元运算符（使用模数依次交替使用模数）来实现此目的，但是它呈现/返回了两种可能的Popover结果，onClick会在卡的两面弹出Popover。
render() {
const cards = timelineObjects.map((card, i) => (
<React.Fragment key={i}>
{i % 2 === 0 ? (
<VerticalTimelineElement
className="vertical-timeline-element--work"
key={i}
iconStyle={{
background: "rgb(40,49,72)",
color: "#000"
}}
paddingTop="0em"
//icon={<Print/>}
>
<div>
<Card className="card">
<CardActionArea>
<CardMedia
style={{ height: 0, paddingTop: "100%" }}
image={card.image}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{card.title}
</Typography>
<Typography component="p">{card.subtitle}</Typography>
</CardContent>
</CardActionArea>
<Button
size="small"
color="primary"
component={Link}
//to={card.path}
onClick={this.handlePop}
>
Learn More, index: {i}, RIGHT
</Button>
<Popover
open={this.state.popped}
anchorEl={this.state.anchorEl}
anchorOrigin={{
horizontal: "right",
vertical: "center "
}}
transformOrigin={{
horizontal: "right",
vertical: "bottom"
}}
onClose={this.handleRequestClose}
>
Right popover text
</Popover>
</Card>
</div>
</VerticalTimelineElement>
)
:
(
<VerticalTimelineElement
className="vertical-timeline-element--work"
key={i}
iconStyle={{
background: "rgb(40,49,72)",
color: "#000"
}}
paddingTop="0em"
//icon={<Print/>}
>
<div>
<Card className="card">
<CardActionArea>
<CardMedia
style={{ height: 0, paddingTop: "100%" }}
image={card.image}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{card.title}
</Typography>
<Typography component="p">{card.subtitle}</Typography>
</CardContent>
</CardActionArea>
<Button
size="small"
color="primary"
component={Link}
//to={card.path}
onClick={this.handlePop}
>
Learn More, index : {i}, LEFT
</Button>
<Popover
open={this.state.popped}
anchorEl={this.state.anchorEl}
anchorOrigin={{
horizontal: "left",
vertical: "center "
}}
transformOrigin={{
horizontal: "left",
vertical: "bottom"
}}
onClose={this.handleRequestClose}
>
Left popover text
</Popover>
</Card>
</div>
</VerticalTimelineElement>
)}
</React.Fragment>
));
您的弹出窗口都锚定在同一元素（this.state.anchorEl）上，并且都配置为基于相同的布尔值（this.state.popped）打开。这意味着，如果您的时间轴中有2个以上的对象，则为每个对象渲染一个弹出框，所有弹出框将一起打开或关闭，并且所有弹出框均位于唯一锚元素（无论是哪个元素）的左侧/右侧。
您可能应该创建一个新TimelineObject组件，该组件呈现单个时间轴对象，并且可以具有自己的本地状态，并分配自己的本地状态anchorEl以将其弹出窗口锚定到。可能还有它自己的popped状态。那么您的地图函数将更像：
timelineObjects.map((card, i) => <TimelineObject key={i} card={card} onLeft={i%2==0} />)
另外，this.state.popped也可以将其用作显示索引框的卡片索引，而不是将其用作布尔值。并在您的Popover代码中执行：
<Popover open={this.state.popped === i} ...
而当您将其popped设置为this.setState({popped: indexOfCardToShowPopover, anchorEl: elementOfCardToAnchorPopover });
这样，一次只能打开一个弹出窗口。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句