JSX代码；随着文章的阅读进度而动态显示百分比

写一个JSX代码；随着文章的阅读进度而动态显示百分比；

当文章的阅读进度发生变化时，可以使用以下的 JSX 代码来动态显示百分比：

import React, { useState, useEffect } from 'react';

const Article = () => {
  const [scrollPercentage, setScrollPercentage] = useState(0);

  const handleScroll = () => {
    const windowHeight = window.innerHeight;
    const fullHeight = document.documentElement.scrollHeight;
    const scrollPosition = window.scrollY || window.pageYOffset || document.body.scrollTop + ((document.documentElement && document.documentElement.scrollTop) || 0);
    const percentage = (scrollPosition / (fullHeight - windowHeight)) * 100;
    setScrollPercentage(percentage.toFixed(2));
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div>
      <h1>文章标题</h1>
      <p>文章内容...</p>
      <p>当前阅读进度: {scrollPercentage}%</p>
    </div>
  );
};

export default Article;

上述代码会创建一个名为 Article 的函数组件。它使用了 React 的 useState 和 useEffect 钩子来追踪页面滚动，并在滚动时计算当前的阅读进度百分比。然后，它将百分比值渲染到 JSX 中，并显示在页面上。

请确保你在 React 项目中使用此代码，并在 JSX 文件中引入 Article 组件进行渲染。

让 <p>当前阅读进度: {scrollPercentage}%</p>定浮在右下角

要将 <p>当前阅读进度: {scrollPercentage}%</p> 定位在右下角，你可以使用 CSS 来实现。以下是修改后的代码：

import React, { useState, useEffect } from 'react';

const Article = () => {
  const [scrollPercentage, setScrollPercentage] = useState(0);

  const handleScroll = () => {
    const windowHeight = window.innerHeight;
    const fullHeight = document.documentElement.scrollHeight;
    const scrollPosition = window.scrollY || window.pageYOffset || document.body.scrollTop + ((document.documentElement && document.documentElement.scrollTop) || 0);
    const percentage = (scrollPosition / (fullHeight - windowHeight)) * 100;
    setScrollPercentage(percentage.toFixed(2));
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div>
      <h1>文章标题</h1>
      <p>文章内容...</p>
      <div className="progress">
        <p>当前阅读进度: {scrollPercentage}%</p>
      </div>
    </div>
  );
};

export default Article;

在上述代码中，我添加了一个 <div> 元素并为其添加了一个名为 progress 的 CSS 类。然后，将 <p>当前阅读进度: {scrollPercentage}%</p> 放在这个 <div> 内部。现在我们需要为 progress 类添加一些 CSS 样式来实现将其定位在右下角。在你的 CSS 文件中添加以下代码：

.progress {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

上述 CSS 代码中，我们使用了 position: fixed 将进度条固定在页面上，bottom: 20px 和 right: 20px 将其定位到右下角，background-color 设置背景颜色，color 设置文字颜色，padding 设置内边距，border-radius 设置边框圆角。

这样，<p>当前阅读进度: {scrollPercentage}%</p> 就会以浮动的形式显示在页面的右下角。

可以将两段代码结合起来，将阅读进度数据传递给 Progress 组件的 percent 属性，以动态展示阅读进度。

以下是结合后的代码示例：

jsx

Copy

import React, { useState, useEffect } from 'react';
import { Progress } from 'antd';

const Article = () => {
  const [scrollPercentage, setScrollPercentage] = useState(0);

  const handleScroll = () => {
    const windowHeight = window.innerHeight;
    const fullHeight = document.documentElement.scrollHeight;
    const scrollPosition =
      window.scrollY ||
      window.pageYOffset ||
      (document.body.scrollTop +
        ((document.documentElement && document.documentElement.scrollTop) || 0));
    const percentage = ((scrollPosition / (fullHeight - windowHeight)) * 100).toFixed(2);
    setScrollPercentage(percentage);
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div>
      <h1>文章标题</h1>
      <p>文章内容...</p>
      <Progress type="circle" percent={parseFloat(scrollPercentage)} />
    </div>
  );
};

export default Article;

在这个示例中，我们将 scrollPercentage 的值作为 percent 属性传递给了 Progress 组件。每当用户滚动页面时，scrollPercentage 的值会更新，从而触发组件的重新渲染，进而更新进度条的展示。

请注意，我们使用 parseFloat 将 scrollPercentage 的值转换为浮点数，以确保传递给 Progress 组件的是一个有效的百分比值。

这样，当用户阅读文章时，进度条将动态显示阅读进度。