react+typeScript框架config-overrides中设置Alias路径 报错的解决方法

本文介绍了在使用customize-cra和react-app-rewired的React+TypeScript项目中,设置Alias路径时遇到的错误及解决方法。通过在tsconfig.json同级目录创建paths.json文件并进行相应配置,可以成功解决报错问题。
摘要由CSDN通过智能技术生成

该框架使用的是 customize-cra和react-app-rewired。

设置Alias路径:

const {
    override,
    addWebpackAlias
} = require('customize-cra');
const path = require('path')
module.exports = override(
    addWebpackAlias({
        ['@']: path.resolve(__dirname, './src'),
        ['@components']: path.resolve(__dirname, './src/components'),
        ['@utils']: path.resolve(__dirname, './src/utils'),
        ['@pages']: path.resolve(__dirname, './src/path')
    })
)

这属于正常的设置方法。然而在typescript中会报错。

解决方法:

1,在tsconfig.json的同级目录下建一个paths.json文件

paths.json:

{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"],
        "@components/*": ["src/components/*"],
        "@pages/*": [
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React-barrage是一个React组件库,提供了在页面上展示弹幕的功能。在使用react-barrage之前,你需要先在项目安装它: ``` npm install react-barrage --save ``` 然后在你的组件使用它: ```tsx import React, { useCallback, useEffect, useState } from 'react'; import { Barrage, BarrageItem } from 'react-barrage'; interface Message { text: string; time: number; } const BarrageComponent: React.FC = () => { const [messages, setMessages] = useState<Message[]>([]); useEffect(() => { // 模拟异步获取弹幕数据 const timer = setInterval(() => { const now = Date.now(); setMessages(prevMessages => [ ...prevMessages, { text: `弹幕${now}`, time: now } ]); }, 1000); return () => clearInterval(timer); }, []); const renderItem = useCallback(({ text }) => { return <div>{text}</div>; }, []); return ( <Barrage> {messages.map(message => ( <BarrageItem key={message.time} text={message.text} render={renderItem} /> ))} </Barrage> ); }; export default BarrageComponent; ``` 这里的Barrage组件是弹幕的容器,而BarrageItem则是每一条弹幕。你需要将需要展示的弹幕数据传递给BarrageItem,并通过render函数来渲染每一条弹幕的内容。在上面的例子,我们使用了useState来存储弹幕数据,并使用useEffect模拟异步获取数据的过程。当组件挂载后,我们每隔一秒钟就会向弹幕数据添加一条新的弹幕数据,并将其展示在页面上。 需要注意的是,由于react-barrage是基于canvas实现的,因此在使用时需要注意一些性能问题。如果弹幕太多或太长,可能会导致页面卡顿或者崩溃。因此,在使用时需要根据实际情况来控制弹幕的数量和长度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zeng__Y1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值