问题标签 [tsx]

这是场景：

我有一个自定义组件：

并且引用的 SuperComponent 和 SubComponent1 是：

<SubComponent2 />我希望 SubComponent1 是 SuperComponent 的唯一有效子代，也就是说，如果我将或 Other types 作为子级，我希望 typescript 可以抛出错误<SuperComponent>

似乎打字稿只检查子级是否应该具有 ReactElement 的类型，但 ts 不会检查该子级的道具的形状（即 subPropsType1），也就是说，如果我将字符串或数字放置为 SuperComponent 的子级, ts 会抱怨类型要求不满足，但是如果我在这里放置任何 jsx 标签（将被转译为 ReactElement），ts 将保持沉默

任何想法 ？如果需要在此处发布任何配置，请随时询问

非常感谢任何想法和解决方案

我正在为我的状态使用 Redux 构建一个带有 TypeScript 的 React Native 应用程序。

我喜欢将两个单独的文件用于configureStore. 在 JS 这看起来像这样：

configureStore.dev.js：

configureStore.prod.js：

configureStore.js：

然后在App.js：

现在 TypeScript 的问题是 - 在将这些文件转换为.ts和之后.tsx- 此代码会引发 linting 错误（并且它还会阻止所有 Jest 单元测试运行）。

modules.exports根据环境变量导出相应文件的行会引发错误：

在throwsApp.tsx的导入中：configureStore

在 TypeScript 中如何处理这种情况？

我能想出的唯一解决方案是只使用一个文件，并为所有 Dev only 配置使用大量 if。但这对我来说似乎并不干净。

我正在尝试创建简单的样板来创建 Vue tsx 组件，但是在配置 Jest 测试 tsx 组件时遇到问题。如果有人已经解决了类似的案例或可以分享有关它的线索，我正在徘徊。

项目在这里 - https://github.com/zdravkov/vue-tsx-files-boilerplate

问候，

I have a TypeScript project that contains a bunch of files in different directories all located under src/.

Is it possible to write a Jest test so that it only returns success if each *.tsx file found under the parent directory (src/) has a corresponding *.spec.tsx test file?

In other words if I have the following 3 files:

The Jest test would fail until such time that the following files are created:

我试图通过在打字稿中的每个对象数组中切换 isOpen 来应用以下 reactstrap 下拉列表。我从 redux 收到一个具有以下结构的对象，Object.InnerObject.Array[isOpen,isOpen,...] 我试图触发该数组中的切换，但打字稿限制我执行以下操作。我有以下状态对象：

我试图在以下组件的选项数组中切换 isOpen：

问题是当我到达这里时，我实际上无法设置传递的下拉列表 isOpen 的状态：

当我使用styled-components时，我一直在努力使用Jest运行测试。

我从 styled-components/jest 中获取了示例代码

我总是出现以下错误：

测试文件是 .tsx。Jest 配置如下：

在扩展名为 .tsx 的文件中，调试功能不再适用于我。

调试 .ts 文件时它正常工作：

源地图从它仍然工作时起没有变化。但是.tsx文件现在看起来像这样。所有代码都是黑色的，而不是样式以指示关键字/字符串等之间的差异。并且在调试（确实有效）时，我无法悬停变量来查看它们的值。

知道如何解决这个问题吗？

编辑：我曾经通过发送内容类型标头解决了这个问题，如下面的答案所述。但是问题又回来了，即使当我在新选项卡中打开源文件时，我可以看到 Content-Type 是“application/javaScript”

有没有办法让 React 组件中定义的事件处理程序可以在类似 HTML 的标签中访问？我的意思是这样的：

我的目标是定义onDoSomething，但目前我只知道如何创建参数，例如param1and param2。

如何使事件处理程序onDoSomething可以通过 TSX 访问，类似于使用onClick事件？

我使用 React 构建了一个存储文档的 Web 应用程序。这些是用 HTML 创建的，然后存储在数据库中。为了在应用程序中显示它们，我div使用dangerouslySetInnerHTML.

即使这工作得非常好，dangerouslySetInnerHTML顾名思义，还是要更加注意这种情况，但我想知道究竟可以做些什么来保持足够的灵活性来加载 HTML 并使其出现在 Web 应用程序中。我相信危险一词解决了跨站点脚本的危险，这意味着可以注入脚本，执行有害代码。

作为对策，我想在将 HTML 代码解析为div. 解决此问题的一个库是DOMPurify。另一种方法是使用html-react-parser将数据库中的 HTML 代码直接转换为 React Elements 。

那是正确的方法吗？或者有替代品dangerouslySetInnerHTML吗？

是否有可能通过 id 通过 SASS 访问 HTML 元素？我在 TSX 文件中结合使用 SASS 和 React。通常对于样式，我会定义一个 SASS 条目并将该条目添加到类列表中，如以下示例所示：

报告.sass：

报告.tsx：

这个例子工作得很好。但是如果我现在给div标签一个 id，我还需要相应地更改 SASS 文件。这通过失败，如下所示：

报告.sass：

报告.tsx：

我相信 SASS 文件会忘记该#city条目，因为其中没有指向Report.tsx它的指针。我对这个假设是否正确？我怎样才能使 SASS 命令与cityid 一起工作？