javascript - 使用滚动事件 React 加载技能栏

Question

我正在尝试做一个在用户滚动到 React.Js 组件时加载的技能栏。目前我无法让它工作。这是代码：

const Progress = ({done}: {done: string}) => {
    const [style, setStyle] = useState({});

    useEffect(() => {
        window.onscroll = () => {
            setTimeout(() => {
                const newWidth = {
                    opacity: 1,
                    width: `${done}%`
                }
                
                setStyle(newWidth);
            }, 200);
        }
      }, [done]);        
    
    return (
        <div className={styles.bg}>
            <div className={styles.graphContainer} style={style}>
                {done}%
            </div>
        </div>
    )
}

const SkillsComponent = () => {    
    return (
        <>
        <Container>
            <h2>Skills</h2>                
                    <div className={styles.bg}>
                        <div className={styles.graphContainer}>
                            <Progress done='90' className={`${styles.skills} ${styles.html}`}>HTML</Progress>
                        </div>
                    </div>               
        </Container>
        </>
    );
}
 
export default SkillsComponent;

这是CSS代码：

.graphContainer {
  padding-top: 10px;
  width: 100%;
}
.skills {
  background-color: white;
  text-align: left;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  color: white;
}
.bg {
  background-image: repeating-linear-gradient(90deg, white, #222222 3px, #222222 33.3%);
  border: 2px solid #fff;
  margin-bottom: 4em;
  display: inline-block;
  min-width: 100%;
}

.html {
  width: 0%;
  background-color: #3f50b5;
  border-radius: 0px 12px 12px 0;
  margin-left: 4px;
}

我正在使用 Typescript，目前我收到此错误：

输入'{孩子：（字符串|元素）[]; 完成：字符串；类名：字符串；}' 不可分配给类型 'IntrinsicAttributes & { done: string; }'。
类型'IntrinsicAttributes & { done: string; 上不存在属性'children' }'.ts(2322)

标签： javascriptreactjstypescriptscrolldom-events