问题标签 [react-tsx]

我正在使用 TypeScript 构建一个 React Native 应用程序。我的初创公司最近从 JavaScript 切换到 TypeScript，我正在迁移代码。

我有一个<FlatList />包含两种类型的场所：餐厅和酒吧。Restaurant 和 Bar 共享一些属性，但它们也不共享。例如，该属性servesFood是餐厅独有的。

该renderItem函数如下所示：

问题是，在这个三元运算符的条件下，TypeScript 会抛出错误：

此外，在访问特定于类型的属性时，在特定于类型的代码中也存在 linting 错误。

注意：由于各种原因，我不能让他们共享一个属性并将一个设置为 true 并将另一个设置为firsttrue false。

那么我如何告诉 TypeScript 在 If 子句/三元运算符项的一部分中是 Restaurant 类型，而在另一项中是 bar 类型，这样这些 linting 错误就会消失。

我有一个看起来像这样的组件：

问题是这会引发 linting 错误：

为什么 TypeScript 不能识别"add"或者"delete"是字符串或者"add"是模式允许的类型之一？

我正在使用 Typescript react 构建一个 Web 应用程序。我正在尝试制作一个在点击时展开的手风琴菜单，但它只响应第二次点击。我认为这是因为它只在第一次点击后才开始收听。

有没有办法让它从一开始就听？我尝试在构造函数中初始化事件侦听器，但它似乎不起作用。

这是我的课：

文件package.json：

文件tsconfig.json：

文件test.tsx：

运行tsc --project . --noEmit结果出现以下错误：

这是一个错误吗？如果我禁用该--strict选项或省略<Props>in Component<Props>，它将成功编译。

const Hashable: React.SFC<{Element: string}> = ({ Element = 'div', ...props }) => <Element {...props} id={'someId'} />

ts 错误：类型'{ id：字符串；}' 不可分配给类型“IntrinsicAttributes”。类型“IntrinsicAttributes”上不存在属性“id”。

如何键入内在元素的道具（id）？

我已经使用 React JS 和 Flow 工作了很长时间，现在，最近切换到了 typescript。我不确定为什么打字稿会抱怨无状态组件定义。

资源

错误

而且我不确定为什么使用 React.Fragment 会使错误消失。

我不想使用 React.Fragment 因为根据我的理解，这不是一个解决方案，而是一个 hack。

堆栈闪电战在这里

我是反应新手，我正在学习使用 typescript 进行反应编程导航。因为大多数教程都使用 java 脚本，所以我无法解决使用 typescript 编程导航的问题

正如我尝试过的大多数教程一样

显示错误“历史”在类型上不存在

我尝试了几种解决方案，例如

此方法将更改 url 路径，但组件不会加载，如此处所述https://github.com/ReactTraining/react-router/issues/4059

我也尝试了另一种解决方案

这给了我以下错误 TypeError: _this.context.push is not a function

我的完整代码

我只需要使用打字稿和浏览器路由器在 SPA 中单击按钮导航到另一个页面

注意：redirect 正在工作，并且带有 createhashhistory() 的 hashrouter 也正在工作。

我有一个组件接收两组数据并且是一个 react-beautiful-dnd DragDropContext如下

到目前为止，此代码运行良好，并且根据MyDraggableCompdnd 实施指南正确实施并包含{...sectionProvided.dragHandleProps}

现在已经更改了后端并且dataSetTwo永远不会为空或为空，因此想要删除条件并始终呈现它。

但移动的dataSetTwo>0条件，只是有

导致我什至不了解与案例的关系以及要搜索什么的错误？有人可以向我解释发生了什么以及如何解决吗？

我正在尝试编写一个函数来处理mouse和touch事件。通过结合两个接口React.TouchEvent和React.MouseEvent，例如：

日志给了我预期的输出，我没有收到任何控制台错误，它按我预期的方式运行。但是我的编辑器出现错误：

错误:(94, 22) TS2339: 类型 'MouseEvent | 上不存在属性 'screenX' 触摸事件'。“TouchEvent”类型上不存在属性“screenX”。

和

错误:(90, 13) TS2339: 属性 'touches' 不存在于类型 'MouseEvent | 触摸事件'。“MouseEvent”类型上不存在属性“touches”。

我怎样才能同时使用这两个接口React.TouchEvent并且React.MouseEvent没有所有这些错误？

在我的 React 应用程序中，我正在尝试将 JS react-pose-@reach/router示例转换为 TypeScript，但它不起作用。

以下是 中的相关类型react-pose：

JS 示例如下所示：

来源：https ://popmotion.io/pose/examples/route-transitions-reach-router/

我被困在这里：

上面<RouteContainer key={location.key}>写着：

类型 'ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; 初始姿势？：字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; innerR...' 不可分配给类型 'ComponentFactory>'。类型 'ComponentClass<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; 初始姿势？：字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; inner...' 不能分配给类型 'ComponentFactory>'。键入'组件类< { [键：字符串]：任何；孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; 初始姿势？：字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; inner...' 不提供签名匹配 '(poseConfig?: DomPopmotionConfig | DomPopmotionConfigFactory> | undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; inner...' 不提供签名匹配 '(poseConfig?: DomPopmotionConfig | DomPopmotionConfigFactory> | undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; inner...' 不提供签名匹配 '(poseConfig?: DomPopmotionConfig | DomPopmotionConfigFactory> | undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。| undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。| undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。

这让我很困惑，因为打字看起来是正确的。我不想在这里使用匿名签名并在打字时保持强势。

我该如何解决这个问题？