时间戳

首页 > 解决方案 > 如何在反应循环中创建元素之间的关系？

javascript - 如何在反应循环中创建元素之间的关系？

问题描述

我希望创建一个链接列表，所有链接都在悬停时显示它们各自的缩略图。链接和缩略图都不是静态的——我使用 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

标签： javascriptreactjsgatsby

解决方案

您可以编写自己的自定义代码来创建一个弹出窗口，该弹出窗口将在悬停/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>
    );
  }
}

推荐阅读