我正在开发 next.js 应用程序。它有以下tsconfig.js
{
"compilerOptions": {
"target": "ES2018",
"module": "esnext",
"lib": [
"dom",
"es2018",
"es2019.array"
],
"jsx": "preserve",
"sourceMap": true,
"skipLibCheck": true,
"strict": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"allowJs": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"incremental": true
},
"exclude": [
"server",
"next.config.js"
],
"include": [
"lib/global.d.ts",
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"**/*.js"
]
}
Run Code Online (Sandbox Code Playgroud)
它在开发模式下运行良好,但在创建构建时显示以下错误:
ERROR in tsconfig.json
22:5 Option 'noEmit' cannot be specified with option 'incremental'.
20 | "resolveJsonModule": true,
21 | "isolatedModules": …
Run Code Online (Sandbox Code Playgroud) 我已经合作react.js
了一段时间。最近,我开始看到如下错误:
Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes'
Run Code Online (Sandbox Code Playgroud)
我不知道发生了什么。我用谷歌搜索了一下,我发现其他人的说法是它是props
. 这是我看到的一个场景。而不是:
<MyComponent action={this.state.action} />
Run Code Online (Sandbox Code Playgroud)
以下工作很好:
<MyComponent {...props} />
Run Code Online (Sandbox Code Playgroud)
我想了解什么是IntrinsicAttributes
和IntrinsicClassAttributes
在这件事react
。您能否为我提供一个详细的答案,说明为什么会发生此类错误以及这些错误究竟是什么?
ConfigService
我正在尝试在我的中使用,users.module.ts
但我得到了
错误:Nest 无法解析 UsersService(UserRepository、HttpService、?)的依赖项。请确保索引 [2] 处的参数 ConfigService 在 UsersModule 上下文中可用。
潜在的解决方案:
我已将 ConfigModule 导入到我的 UsersModule 中,但仍然无法正常工作:(
应用程序模块.ts
@Module({
imports: [
ConfigModule.forRoot({
expandVariables: true,
}),
TypeOrmModule.forRoot(),
UsersModule,
AuthModule,
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
Run Code Online (Sandbox Code Playgroud)
用户.module.ts
import { ConfigModule } from '@nestjs/config';
@Module({
imports: [ConfigModule, HttpModule, TypeOrmModule.forFeature([User])],
controllers: [UsersController],
providers: [UsersService],
exports: [UsersService],
})
export class UsersModule {}
Run Code Online (Sandbox Code Playgroud)
用户.service.ts
export class UsersService { …
Run Code Online (Sandbox Code Playgroud) 这是我pages/index.js
的next.js
项目
const Index = () => {
console.log('Index Component Called');
return (
<div>Hello</div>
)
}
export default Index;
Run Code Online (Sandbox Code Playgroud)
控制台日志功能在CLIENT端调用两次,在 next.js 节点SERVER上调用一次
我正在使用Material-UI
并尝试将省略号应用于 中的底层 Typography 组件CardHeader
,但传递noWrap
到titleTypographyProps
似乎不起作用。
我需要以CardHeader
某种方式覆盖吗?我尝试max-width: 100%
对两者CardHeader
和底层Typography
组件进行设置,但没有成功。
演示
在 React 中开发时是否可以获得自动完成、建议、智能感知或 CSS 的某些东西?
例如,当我写这样的东西时,我希望能够看到该 CSS 属性的所有可能性。我知道如果我使用.css
文件我可以得到这个,但有时我想使用内联 CSS 来做一些事情,而且每次我都必须谷歌搜索才能看到我可以使用什么,这真的很烦人。
我正在使用 multer 将媒体上传到我的 s3 存储桶。我使用 multer-s3 作为中间件来上传媒体,如:
const upload = multer({
storage: multerS3({
s3: s3,
bucket: myBucket,
key: function (req, file, cb) {
cb(null, new Date().getTime() + '_' + file.originalname)
}
})
});
Run Code Online (Sandbox Code Playgroud)
并在路由中调用它:
router.post("/media",upload.single("media"))
Run Code Online (Sandbox Code Playgroud)
这很好用。但是一个对我不起作用的场景是:假设我上传了一张图片,我想通过在上传之前调整它的大小来存储它的多个版本。我无法像普通的那样调用上传功能。我想做类似的事情:
let thumbnail = myFunctionToReturnImageFile(req.file);
upload(thumbnail);
Run Code Online (Sandbox Code Playgroud)
我知道我需要发送一些多部分/表单部分,但我找不到解决方案。如果你给我推荐一个很棒的东西。
React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps
I use useDispatch()
Hook from React Redux on a functional component like this:
const Component = () => {
const dispatch = useDispatch();
const userName = useSelect(state => state.user.name);
useEffect(() => {
dispatch(getUserInformation());
}, [userId]);
return (
<div>Hello {userName}</div>
);
};
export default Component;
Run Code Online (Sandbox Code Playgroud)
How to remove this warning without removing the dependency array react-hooks/exhaustive-deps which can be useful to avoid other errors.
我正在react.js
使用打字稿创建一个组件。我被困了一段时间,想弄清楚如何让prop
两个中的一个成为强制性的。我正在创建一个Label
组件。它应该接收一个icon
或title
在道具中。我过去传递道具的方式是:
import React, { forwardRef } from 'react';
import clsx from 'clsx';
export interface LabelProps{
className?: string;
onClick?: () => void;
icon: string,
title: string
}
export const Label = forwardRef<HTMLDivElement, LabelProps>(function(
{ className, onClick, icon, title },
ref,
) {
return (
<div className={clsx(className, 'label')} onClick={onClick} ref={ref}>
// My Way to display thing's
</div>
);
});
export default Label;
Run Code Online (Sandbox Code Playgroud)
现在,我知道我可以分别检查props 和 render 中的icon
和的值title
。但我希望打字稿不允许我通过它们并显示错误。我想将此组件用作:
<Label icon={icon} …
Run Code Online (Sandbox Code Playgroud) reactjs ×5
typescript ×4
css ×2
next.js ×2
amazon-s3 ×1
babeljs ×1
express ×1
javascript ×1
material-ui ×1
multer ×1
multer-s3 ×1
nestjs ×1
node.js ×1
react-hooks ×1
react-redux ×1
use-effect ×1
webpack ×1