问题标签 [tsx]

亲爱的天才 StackOverflowians，

我正在尝试编写一个应用程序，用户可以在其中配置问题和答案，以及为每个问题定义帮助文本。我正在用 typescript React 写这个——当你想定义问题的答案类型时，这很方便。

我想在显示/隐藏样式文档的问题旁边有一个按钮。该按钮看起来和工作得很好，但是隐藏/显示的文档没有得到应该与之关联的生成的样式类。

这是显示帮助文档的功能组件：

tok来自一个自定义类DocumentationStore，它几乎是一个包装器markdown-it，一个方便的 js 库，用于处理 md 文件，我希望我的用户将他们的帮助文本写入（并以这种方式存储）。

所以我这样做（在 DocumentationStore 类的不同模块中）：

稍后，我将 HelpTextBody 样式设置为：

现在保持简单，这样我就可以看看它是否有效......

然后我将它包含在一个带有我导出的按钮的组件中：

所以我把它全部打包，然后把东西放进浏览器，我得到的是这个样式标签（点击按钮后），它看起来是正确的：

但是我的文档的html缺少对类的引用（我猜是.hAvMqj？）

那么我哪里错了？我不明白为什么它会生成样式，并且组件的 HTML 呈现...但是该类未应用于组件！你怎么看？

我想在我的路由常量中添加一个组件：

组件计数器

所以我收到此错误消息：

[at-loader] 中的错误 ./ClientApp/routes.tsx:10:28 TS2326：属性“组件”的类型不兼容。类型“typeof Counter”不可分配给类型“StatelessComponent | 未定义> | 组件类 | 未定义>'。参数 'props' 和 'props' 的类型不兼容。键入'RouteComponentProps | undefined' 不可分配给类型 'RouteComponentProps<{}>'。类型“未定义”不可分配给类型“RouteComponentProps<{}>”。

那么我该如何解决这个问题呢？

carousel.js 是我的 JavaScript 代码。它的目的是在轮播中添加诸如 previous 和 next 之类的事件。我应该如何在我的 TypeScript 中使用它？

下面是我使用了一些基本 HTML 的渲染方法。

我正在尝试渲染一个有两个孩子的父组件。子项的渲染将切换，因此一次只会渲染第一个子项，另一次将是最后一个子项，最后将切换回第一个子项（然后应该包含之前显示的所有值）。我以为这很简单，但事实证明并非如此。

现在问题来了：每当调用 switchContainer 方法时，它都会切换容器并渲染另一个容器。然而，所有成员变量、道具和状态都丢失了，它基本上从头开始重新实例化子组件。

有没有办法“按原样”保存子组件，一旦重新渲染，它将再次保存所有成员变量、道具和状态？

我知道您可以像这样向元素发送道具和状态：

但这并不能解决缺少成员变量的问题，而且我认为这不是一个顺利的解决方案。

到目前为止，我的尝试是（这只是一个模型）：

我的组件 Child 有一个可以明显改变的成员变量。但是，据我所知，我只能通过 PROPS 和 STATES。我知道我可以通过 PROPS 或其他参数传递我的成员变量，但是没有更漂亮的解决方案吗？

是否有可能在 Typescript 中创建减法类型？我正在考虑一个用户案例，当 React 组件仅向组件用户公开 if 道具的子集时。React-redux 连接示例：

阅读后： 从类型中排除属性

似乎我得到了这个工作......

....但我不明白怎么做。

更新 2：

在玩了更多之后，我发现了一种更简洁的方式（在我看来），来描述一个减法类型：

我想这样定义jsx：

我在 CSS 中使用 --length，我也有具有 --count 的单元格，它使用 CSS 伪选择器（使用计数器 hack）显示计数。

但打字稿抛出错误：

是否可以更改样式属性的类型以接受 CSS 变量（自定义属性），或者有没有办法强制任何样式对象？

好吧，最近我开始使用 React.js 库，现在我正在尝试将它与 Firebase 托管一起使用，使用 TypeScript 语言。但是，每次我尝试使用 tsx 编写一些代码时它都不起作用，例如：

这样我就不能在这里写任何jsx代码，因为它总是出现问题：

有人可以帮我吗？

我收到Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type.错误，尽管我已经webpack.js配置为使用ts/文件，并且在tsx我导入文件之前所有应用程序都运行良好。environment-dev.ts./src/service/transport-service.ts

有谁知道这里有什么问题？非常感谢所有帮助。

错误：

缩小的应用程序结构

package.json devDependencies：

webpack.js：

运输服务.ts：

环境-dev.ts：

我的 stenciljs 渲染函数目前是用打字稿这样写的：

但我更喜欢这样写：

但这给了我一堆错误信息。

有没有办法编写 jsx 代码，以便我有条件的打开和关闭标签？