Проверьте, какой элемент находится в React

Question

Я создаю сайт портфолио для меня с помощью Gatsby + Wordpress. Я задавался вопросом, возможно ли навести имя элемента портфолио и изображение, связанное с этим?

У меня есть идея, что, если PortfolioItemNameLink обнаружен, он показывает изображение из того же проекта. Как я могу проверить, какой элемент находится?

const PortfolioItemsText = () => {

  return (
    <StaticQuery
      query={graphql`
        {
          allWordpressWpPortfolio {
            edges {
              node {
                id
                slug
                title
                excerpt
                content
                featured_media {
                  source_url
                }
              }
            }
          }
        }
      `}
      render={props => (
        <Wrapper>
          <PortfolioImageWrapper>
            {props.allWordpressWpPortfolio.edges.map(edge => (
              <PortfolioImage
                src={edge.node.featured_media.source_url}
                alt="Thumbnail"
              />
            ))}
          </PortfolioImageWrapper>

          <PortfolioItemsWrapper>
            <PortfolioItems>
              {props.allWordpressWpPortfolio.edges.map(portfolioItem => (
                <PortfolioItem
                  style={currentStyle}
                  key={portfolioItem.node.id}
                >
                  <PortfolioItemNameLink
                    to={`/portfolio/${portfolioItem.node.slug}`}
                  >
                    <PortfolioItemNameLinkText>
                      {portfolioItem.node.title}
                    </PortfolioItemNameLinkText>
                  </PortfolioItemNameLink>
                </PortfolioItem>
              ))}
            </PortfolioItems>
          </PortfolioItemsWrapper>
        </Wrapper>
      )}
    />
  )
}

export default PortfolioItemsText

Вот скриншот из моего проекта. При наведении курсора я получаю правильное изображение видимым, в противном случае изображение должно быть невидимым.

Заранее спасибо!

Answer 1

Передача индекса в handleHover и mouseMovement должна работать нормально и обращаться к элементу массива в этих функциях для обработки логики наведения. Дайте мне знать, если это работает

<PortfolioItemsWrapper>
            <PortfolioItems>
              {props.allWordpressWpPortfolio.edges.map((portfolioItem, index) => (
                <PortfolioItem
                  style={currentStyle}
                  key={portfolioItem.node.id}
                  onMouseOver={(e) => handleHover(e, index)}
                  onMouseOut={(e) => handleLeave(e, index)}
                >
                  <PortfolioItemNameLink
                    onMouseEnter={(e) => mouseMovement(e, index)}
                    onMouseLeave={(e) => mouseMovement(e, index)}
                    to={`/portfolio/${portfolioItem.node.slug}`}
                  >
                    <PortfolioItemNameLinkText>
                      {portfolioItem.node.title}
                    </PortfolioItemNameLinkText>
                  </PortfolioItemNameLink>
                </PortfolioItem>
              ))}
            </PortfolioItems>
          </PortfolioItemsWrapper>

Answer 2

Теперь работает так, как я хочу. Я думаю, что я выразил свой вопрос плохо. Если я наведу курсор мыши на заголовок элемента портфолио, я получу изображение, связанное с этим проектом. Изображение устанавливается в селекторе после. Вот мой код:

const PortfolioItemNameLink = styled(Link)`
  display: inline-block;
  z-index: -2;
  text-decoration: none;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  transition: 0.25s linear;
  &:hover {
    color: #fff;
  }
  &:after {
    content: "";

    background-image: ${props => `url(${props.itemimage}) `};
    background-size: 100%;
    width: 300px;
    height: 300px;
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.25s linear;
    z-index: -1;
    visibility: hidden;
  }
  &:hover&:after {
    opacity: 0.7;
    visibility: visible;
  }
`

 <PortfolioItemNameLink
   to={`/portfolio/${portfolioItem.node.slug}`}
   itemimage={`${portfolioItem.node.featured_media.source_url}`}
 >

Спасибо за помощь.

Answer 3

Чтобы захватить событие мыши, вам нужно использовать событие onMouseOver. Если вы хотите захватить событие наведения курсора мыши на PortfolioItemNameLinkText, ваш самый чистый вариант, вероятно, заключается в том, чтобы прикрепить это событие к самому внешнему возвращаемому HTML-элементу (не обязательно должен быть внешним, может быть любым). Так, например, PortfolioItemNameLinkText возвращает:

<div onMouseOver={(e)=>{console.log(this.props.children)}}>
//PortfolioItemNameLinkText code
</div>

Здесь я просто веду запись в консоль {portfolioItem.node.title}, что вы и делаете, будучи ребенком.

Является ли PortfolioItemNameLinkText функциональным компонентом / компонентом без сохранения состояния? Если это так, убедитесь, что вы передаете реквизит правильно. Например:

function PortfolioItemNameLinkText(props){//code} 
or 
const PortfolioItemNameLinkText = (props) => {//code}

Вот еще один поток, показывающий, как использовать события мыши. Наведите курсор на изображение