Как создать отношения между элементами в реакции l oop?

Question

I * sh для создания списка ссылок, каждый из которых отображает свое индивидуальное уменьшенное изображение при наведении. Ни ссылки, ни миниатюры не устаревают c - я запрашиваю их из внешнего источника используя graphql. Теперь, очевидно, то, что я попытался, не сработает, так как ссылки не имеют никакого отношения к их эскизам, и я выбираю их все сразу.

Как мне создать отношения между изображениями и ссылками когда отображаются мои данные? Или это совершенно неправильный подход? Будет ли это работать даже с Gatsby, генератором сайтов stati c?

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

Вы можете написать свой собственный код для создания всплывающего окна, которое будет отображаться в hover / onMouseEnter, и вы можете получить целевую ссылку, установить URL-адрес изображения в состоянии, как visibleThumbnail, а затем показать это изображение во всплывающем окне и затем включить onMouseLeave, скрыть всплывающее окно (используя какой-либо флаг) и сбросить visibleThumbnail на пустое, или это не имеет значения, поскольку оно не отображается.

Существует очень полезный пакет под названием rc-trigger, который можно использовать для отображения всплывающее окно с различными действиями, такими как нажатие, наведение, контекстное меню и т. д. c.

Здесь находится демонстрационная страница

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>
    );
  }
}