问题标签 [react-typescript]

我有一个pages/index.tsxNext.js 页面，其代码如下所示：

问题是，langKey应该是访问页面的子域（例如，en.localhost:3000或fr.localhost:3000;langKey将是en或fr）。如何从 Next.js 上下文中检索此信息？我尝试了 Router 对象，但它看起来不像在第一个/.

我已经使用 Typescript 安装了一个新的 React 应用程序，如下所示：

当我运行该应用程序时，一切似乎都很好。所以我删除了生成的代码并开始编写自己的代码。

当我开始打字时，我注意到我的 IDE（Webstorm 和 VS Code）不会自动导入默认类，例如React：

正如您在以下示例中看到的那样，当我选择 时React，什么都没有发生。但是当我选择Component（默认不导出）时，它已被导入。

之后，我安装了 "@material-ui/core": "^4.6.0".

看来我在这里也有同样的行为。现在，我可以容忍使用诸如imr自动导入它的snipers。但作为一个 Angular 粉丝，我不习惯手动导入所有内容，我希望有一个解决方案。

这导致我提出以下问题：

与其手动导入我要使用的每个模块，有没有更简单的方法可以做到这一点？它开始非常痛苦。

我已经尝试过以下解决方案：

1. 安装steoates 的自动导入
2. 安装Arnuariri 的 Material UI Snippets
3. 安装Burke 的简单反应片段

我不是在寻找片段扩展，而是在寻找一种自动导入默认导出模块的方法。

我正在学习 Typescript-react，我陷入了这个错误Type '({ items }: PropsWithChildren<TodoProps>) => Element[]' is not assignable to type 'FunctionComponent<TodoProps>'，我迷失了。

完全错误：

代码链接：沙盒回购。

TodoList文件中的函数声明发生错误TodoList.tsx。

任何帮助表示赞赏。干杯!

代码：

带有TypeScript 3.5.3 链接到操场的案例- TS 3.5.3 工作

TypeScript 3.7.2 链接到操场的案例- TS 3.7.2 不起作用

我有一个 React 组件，它允许用户向远程服务提交可能长时间运行的查询。当查询运行时，组件会显示一个取消按钮。我想测试这个按钮是否在预期的时候出现，它的点击处理程序取消了之前的 API 请求，等等。

由于按钮仅在异步 API 调用处于活动状态时出现，因此我为此目的编写的测试在异步 API 本身的模拟实现中对按钮进行断言。它们不是超级优雅，但我确认当我删除部分生产代码时它们确实会变红。

在将 @testing-library/react 从 8.0.1 升级到 9.3.2 时，虽然测试仍然通过，但我现在多次收到以下警告：

我在下面的 CodeSandbox 中重现了这个问题（请务必选择右侧的“测试”选项卡，然后查看右下角的“控制台”消息）。

关于这个GitHub 问题的最后评论说，act()只要我使用 React 测试库帮助程序和函数（我就是这样），我就不必担心。我错过了什么？

所以说我有一个单一引用样式的组件，效果很好

但是说，我想有多种风格的参考，比如

打字稿抛出一个error说：

预期的类型来自属性“className”，该属性在“IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<{ children?: ReactNode; }>'

我如何将className类型更改为数组才能接受我想要的格式？

在 react typescript 中，如何将两个接口分配给 reducer 函数：标准 {type: string, payload: object} 和 redux-thunk？

减速器.ts

这是给我的错误：

类型“IAction”上不存在属性“类型”。类型“IReduxThunkAction”上不存在属性“类型”。

动作.ts

项目列表.tsx

在这里它告诉我在线调度（actions.getItems（state.value））：

'ThunkAction, {}, {}, AnyAction>' 类型的参数不能分配给'IAction' 类型的参数。类型“ThunkAction、{}、{}、AnyAction>”不可分配给类型“IReduxThunkAction”。

因此，我正在尝试编写一种道具类型格式，其中如果选择了一个道具，则将丢弃另一个道具。

但它说

类型“ButtonProps”上不存在属性“to”。类型 '{ onClick: () => void; 上不存在属性 'to' }'.ts(2339`

如何用左右的方式格式化形状时，当一个选择两个都将被丢弃。没有可选项，选择的道具是必需的。

我在 React 中有一个显示产品分页的组件。当我尝试运行应用程序时，我无法弄清楚为什么会出现此错误：

我的代码：

我的组件如下所示：

我的ProductListProps样子是这样的：

我找不到这里有什么问题

如何限制滚动视图内的视图数量。

我的组件渲染时间太长，因为 map 函数渲染了太多视图。我只需要显示 10 个视图，向上滚动时会呈现更多 10 个视图。

我正在使用本机反应、钩子和打字稿。