在地图函数中使用三元运算符会呈现两个结果

Question

我正在创建一个垂直时间轴，当您沿着时间轴移动时，卡片的两边交替出现，我正在尝试包含一个弹出效果以显示有关 person/event 的更多信息，该 person/event 填充了相对的空白时间线。

我试图通过在我的地图回调中使用三元运算符（使用模数按顺序交替边）来实现这一点，但它是 rendering/returning 两种可能的 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>
    ));

Here's a screen grab of the result.

Answer 1

您的弹出窗口都锚定到相同的元素 (this.state.anchorEl)，并且都配置为基于相同的布尔值 (this.state.popped) 打开。这意味着如果您的时间轴中有 2 个以上的对象，您将为每个对象渲染一个弹出窗口，并且所有弹出窗口将一起打开或关闭，并且所有内容都将指向唯一锚元素的 left/right（无论是什么） .

您可能应该创建一个新的 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 });

这样一次只能打开 1 个弹出窗口。

在地图函数中使用三元运算符会呈现两个结果

Using a ternary operator in a map function is rendering both results

javascript

popover

reactjs