javascript - 在 map 函数中使用三元运算符可同时渲染两个结果

我正在创建一条垂直的时间线，当您沿时间线移动时，卡片的两边会交替出现，我正在尝试添加弹出效果，以显示有关填充时间线上相对空白的人物/事件的更多信息。

我正在尝试通过在地图回调中使用三元运算符（使用模数依次交替使用模数）来实现此目的，但是它呈现/返回了两种可能的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.

最佳答案

您的弹出窗口都锚定在同一元素（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 });

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

关于javascript - 在 map 函数中使用三元运算符可同时渲染两个结果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56859744/