材质 ui 循环进度坐标 - TypeScript

本文将介绍如何使用 TypeScript 和材质（Material）UI创建一个循环进度条，并获取其坐标。

循环进度条是一种漂亮的UI组件，可以在需要持续加载的情况下显示进度。为了在 TypeScript中创建这个组件，我们需要安装两个库：material-ui和@types/material-ui。你可以使用以下命令安装它们：

npm install @material-ui/core
npm install @types/material-ui

然后，我们需要创建一个具有适当样式的循环进度条。以下是创建一个循环进度条的示例代码：

import React from 'react';
import { withStyles, Theme } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';

const styles = (theme: Theme) => ({
  progress: {
    margin: theme.spacing(2),
  },
});

interface Props {
  classes: {
    progress: string;
  };
}

const CustomCircularProgress = withStyles(styles)(({ classes }: Props) => (
  <div>
    <CircularProgress className={classes.progress} />
  </div>
));

这里，为了让进度条居中并有合适的间距，我们使用了一个名为“styles”的对象。我们通过将其传递给withStyles（）高阶组件来将其应用于CircularProgress组件。

有了这个CustomCircularProgress组件，我们可以将其放入我们的React应用程序中，然后访问其坐标。以下是如何获取循环进度条的坐标的示例代码：

import React, { useCallback, useRef, useState } from 'react';
import CustomCircularProgress from './CustomCircularProgress';

interface Position {
  x: number;
  y: number;
}

export default function App() {
  const [position, setPosition] = useState<Position>({ x: 0, y: 0 });
  const progressRef = useRef(null);

  const handleMouseMove = useCallback(event => {
    setPosition({
      x: event.clientX - progressRef.current.offsetLeft,
      y: event.clientY - progressRef.current.offsetTop,
    });
  }, []);

  return (
    <div ref={progressRef} onMouseMove={handleMouseMove}>
      <CustomCircularProgress />
      <p>坐标: {position.x + ', ' + position.y}</p>
    </div>
  );
}

这里，我们使用useState钩子来存储进度坐标，并使用useRef来引用CustomCircularProgress组件，以便我们可以访问它的offsetLeft和offsetTop属性。我们使用handleMouseMove回调函数来更新坐标状态，然后将其添加到progressRef的onMouseMove属性中，以便在鼠标移动时调用该函数。

最后，在我们的React应用程序中呈现CustomCircularProgress组件并添加一个元素来显示坐标信息。

结论

使用TypeScript和Material UI可以很容易地创建一个循环进度条并获取其坐标。我们可以将这个组件放在React应用程序中，然后通过引用它的offsetLeft和offsetTop属性来获得坐标。