如何在react循环中创建元素之间的关系？

Question

我想要创建一个链接列表，所有链接都会在悬停状态下显示它们各自的缩略图图像。无论是链接还是缩略图都是静态的--我正在使用graphql从外部源查询它们。很明显，我尝试过的链接不会起作用，因为链接与它们的缩略图没有任何关系，而且我正在同时选择所有的链接。

在通过数据进行映射时，如何在图像和链接之间创建关系？抑或这是完全错误的做法？这会与静态站点生成器Gatsby一起工作吗？

import React from "react"
import { useStaticQuery, graphql, Link } from "gatsby"
import Img from "gatsby-image"

const LinkTree = () => {
  const data = useStaticQuery(
    graphql`
      query queryPosts {
        allContentfulPost {
          edges {
            node {
              slug
              dateOfCompletion(formatString: "YYYY MM")
              title
              thumbnail {
                sizes(maxWidth: 1280) {
                  ...GatsbyContentfulSizes
                }
              }
            }
          }
        }
      }
    `
  )

  const post = data.allContentfulPost.edges

  return(
    <ul>
      {post.map((post, i) => (
        <li key={i}>
          <Link to={post.node.slug}>
            {post.node.dateOfCompletion}
            {post.node.title}
          </Link>

          <Img
            sizes={post.node.thumbnail.sizes}
          />
        </li>
      ))}
    </ul>
  )
}

export default LinkTree

Answer 1

您可以编写自己的自定义代码来创建弹出，该弹出在悬停/onMouseEnter上是可见的，您可以获取目标链接，将图像url设置为visibleThumbnail状态，然后在弹出窗口中显示该图像，然后在onMouseLeave上显示该图像，隐藏弹出窗口(使用某些标志)，并将visibleThumbnail重置为空，否则就不重要，因为它是不可见的。

有非常有用的包名为rc-trigger，您可以使用它来显示不同操作上的弹出，如单击、悬停、控制菜单等。

这里是演示页面

http://react-component.github.io/trigger/examples/point.html

这是api http://react-component.github.io/trigger/

​

import React from 'react';
import ReactDOM from 'react-dom';
import Trigger from 'rc-trigger';
import 'rc-trigger/assets/index.css';

const builtinPlacements = {
  topLeft: {
    points: ['tl', 'tl'],
  },
};

class Test extends React.Component {
  state = {
    action: 'click',
    mouseEnterDelay: 0,
    visibleThumbnail: ''
  }

  setVisibleThumbnail = (e) => {
     const thumbnail = someLogicToGetTheTheumbnail();
     this.setState({ visibleThumbnail: thumbnail  });
  }

  render() {
    const { mouseEnterDelay, visibleThumbnail } = this.state;

    return (
<ul>
  {post.map((post, i) => (
    <li key={i}>
  
<Trigger
            popupPlacement="topLeft"
            action={['hover]}
            popupAlign={{
              overflow: {
                adjustX: 1,
                adjustY: 1,
              },
            }}
            mouseEnterDelay={mouseEnterDelay}
            popupClassName="point-popup"
            builtinPlacements={builtinPlacements}
            popup={<div
    
  >
    <img src={visibleThumbnail} />
  </div>}
            alignPoint
          >
       <Link id={post.node.id} onMouseEnter={this.setVisibleThumbnail } onMouseLeave={this.hideThumbnail}>
        {post.node.dateOfCompletion}
        {post.node.title}
       </Link>
      </Trigger>

      <Img
        className="thumbnail"
        sizes={post.node.thumbnail.sizes}
        alt={post.node.slug}
        style={style}
      />
    </li>
  ))}
</ul>
    );
  }
}

​