时间戳

首页 > 解决方案 > slate js：如何在悬停时突出显示具有相同标记的相邻组件？

javascript - slate js：如何在悬停时突出显示具有相同标记的相邻组件？

问题描述

// utility hook
function useMouseOver() {
  const [mouseOver, setMouseOver] = useState(false);
  return {
    mouseOver,
    triggers: {
      onMouseEnter: () => setMouseOver(true),
      onMouseLeave: () => setMouseOver(false),
    },
  };
}

// mark component
function CommentHighlight({ attributes, children, ...props }) {
  const { mouseOver, triggers } = useMouseOver();
  return (
    <span
      {...attributes}
      {...triggers}
      style={{
        background: mouseOver ? yellow[600] : yellow[200],
        cursor: 'pointer',
      }}
    >
      {children}
    </span>
  );
}

想象一下 2 条重叠的评论，它们有不同的标记，但使用相同的组件呈现CommentHighlight：

-----
   ---------
aaaccbbbbbbb

当我将鼠标悬停在上方时，aaa我也需要cc更改颜色。但是怎么做？

我唯一的猜测是跟踪 redux（或类似）中的高亮状态，并在状态更改时更新每个评论组件。但这看起来有点矫枉过正。

标签： javascriptreactjsslatejs

解决方案

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [back, setback] = React.useState(false);
  const changeback = value => {
    setback(value);
  };
  return (
    <React.Fragment>
      <CommentHighlight change={back} changeit={e => changeback(e)}>
        aaa
      </CommentHighlight>
      <CommentHighlight change={back} changeit={e => changeback(e)}>
        aaa
      </CommentHighlight>
    </React.Fragment>
  );
}
function useMouseOver(changeit) {
  const [mouseOver, setMouseOver] = React.useState(false);
  return {
    mouseOver,
    triggers: {
      onMouseEnter: () => {
        setMouseOver(true);
        changeit(true);
      },
      onMouseLeave: () => {
        setMouseOver(false);
        changeit(false);
      }
    }
  };
}

// mark component
function CommentHighlight({ attributes, children, ...props }) {
  const { mouseOver, triggers } = useMouseOver(props.changeit);
  return (
    <span
      {...attributes}
      {...triggers}
      style={{
        background: props.change ? "yellow" : "blue",
        cursor: "pointer"
      }}
    >
      {children}
    </span>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我不知道这是否是你正在寻找的方法，但是当你将鼠标悬停在第一个 CommentHighlight 上时，第二个会改变颜色，反之亦然

推荐阅读