React标尺组件实现：简单易懂的示例代码

以下是一个简单的React标尺组件的示例代码：

import React, { useState } from 'react';

const Ruler = () => {
  const [mouseX, setMouseX] = useState(0);

  const handleMouseMove = (event) => {
    setMouseX(event.clientX);
  };

  return (
    <div className='ruler' onMouseMove={handleMouseMove}>
      <div className='ruler-line' style={{ left: mouseX }} />
      <div className='ruler-label' style={{ left: mouseX }}>
        {mouseX}px
      </div>
    </div>
  );
};

export default Ruler;

这个组件使用了React的useState钩子来追踪鼠标的X轴位置，并在组件中渲染了一个标尺线和标尺标签，用于显示鼠标位置的像素值。当鼠标移动时，组件会更新鼠标位置并重新渲染标尺线和标尺标签。

该组件可以通过CSS样式来自定义标尺的外观和行为。例如，可以使用CSS来控制标尺线的颜色、粗细和长度，以及标尺标签的样式和位置。