问题标签 [tsx]

我正在开发一个使用 TypeScript 和 React 的项目，而且我对这两者都是新手。我的问题是关于 TypeScript 中的界面以及它与道具和状态的关系。实际发生了什么？除非我声明接口道具和状态，否则我的应用程序根本不会运行，但是我通过 React 构造函数使用状态，并且我已经看到了所有这些信息都将进入“接口 MyProps”或“接口 MyStates”的示例. 以这段代码为例：

（我删除了 this.state 中的内容只是为了在此处发布）。为什么需要接口？这样做的正确方法是什么，因为我认为我是以 JSX 方式而不是 TSX 方式来考虑的。

我不知道如何使用 Typescript 为我的组件设置默认属性值。

这是源代码：

当我尝试使用这样的组件时：

我收到一条错误消息，提示foo缺少属性。我想使用默认值。我也尝试static defaultProps = ...在组件内部使用，但我怀疑它没有效果。

如何使用默认属性值？我公司使用的许多 JS 组件都依赖于它们，不使用它们不是一种选择。

我有一个 TSX 组件，它是一个像这样包装其子级的容器：

我也有一些纯组件，比如这个：

不过，我一生都无法弄清楚如何制作纯容器组件。声明看起来没问题并且没有显示错误：

children是React.ReactNode因为它就是这样React.Props<X>。

使用时，我得到TS2324 Property 'children' is missing in type 'IntrinsicAttributes & { label: string; 孩子：反应元素 | 字符串 | 号码 | {} | （反应……

我不能说像下面的代码片段那样的话，因为它会说在外部模块 _.tsx 中找不到符号“LabelBox”（这是所有这些代码所在的文件）。我先放功能还是先放界面没关系，反正总体感觉不对。

使纯 TypeScript React 组件能够像完整类组件一样带孩子的正确方法是什么？这可能吗？我不认为它不应该，它仍然是一个无状态组件，children只是一种特殊的props，真正的问题似乎是这里的工具（Visual Studio）没有将 TSX 内容节点映射到children道具。

当在 Visual Studio 中编写纯 HTML 文件（或 Razor CSHTML）时，VS 为<div class="....intellisence..."/>附加到项目的 css 文件中的 CSS 类（）提供了很好的智能。

在 TSX ( ) 中是否可能发生这样的事情<div className="???"/>？

如果我有一个覆盖并指定单个子级的接口，例如：

IntelliSense 正确显示了单元素子道具类型，但我可以将具有这些道具的组件与多个子组件一起使用而不会出现任何错误：

这与 TypeScript 1.8.30.0 编译得很好，但在运行时它会中断：

它只适用于一个<div/>子元素，因为组件代码是为该场景编写的。这对我来说似乎是一个错误——我希望它能够意识到两个<div/>元素与children. 不过，我想我会先在这里问，然后再打开一个问题，以防我遗漏了什么。

是否可以只需要一个孩子this.props.children，或者我必须添加一个特定的道具？

我在 JSX 中有一个react-stockchart图表示例：
JSX plunker: http://plnkr.co/edit/gist:b993d5fcc5c09dd66a6e?p=preview

我想将 JSX 添加到现有的 TypeScript 项目中，因此我将文件扩展名从 JSX 更改为 TSX 并从该站点进行了其他转换：http: //slidedeck.io/thewazir/Using-Typescript-with-JSX

但问题仍然存在，这段代码无法编译：

fitWidth来源：https
://github.com/rrag/react-stockcharts/blob/master/src/lib/helper/fitWidth.jsx 如果我删除fitWidth它以不正确的宽度绘制：

我试过这段代码，它不起作用（根本没有绘制任何东西）：

这也不起作用：

How automatically compile react jsx or tsx to js into visual studio code? Is a task runner needed? or just a configuration into jsconfig.json?

What I already tried:

I already tried to create a jsconfig.json with jsx parameter without success. I configured a TS compiler, however it compiles only TS to JS, not JSX to JS.

I'm wondering if there any configuration that makes this conversion without need to configura a run task. , for instance "compile on save" like the Full Visual Studio.

我正在使用 VS2013 并将现有项目设置为使用 React (0.14) 和 Typescript (1.8.5)。我的 React 代码可以作为 JSX 文件正常工作。我的新 TSX 文件中有一个我无法弄清楚的错误。

我在树下粘贴到组件的每个道具上都有 30 个奇怪的错误 - 这些都是：

类型“IntrinsicAttributes & IntrinsicClassAttributes> & {} & { children?: Reac...”上不存在属性“nameOfProp”。

这是一个让 TypeScript 感到不安的示例代码。任何帮助将不胜感激，因为这是在生产环境中启动和运行 React 的最后障碍之一。注意：我没有包含有关 App 状态的信息以节省空间，但红线仅在子组件名称上（过滤器、名称、id、计数）

将 react-router 与 typescript 和 webpack 一起使用时，我不断收到此错误

JSX 元素类型“路由器”没有任何构造或调用签名。

这就是我的路由器的配置方式

我正在使用@types/react-router - 2.0.38

如何避免此错误并使路由器正常工作？

如何使用 ES6 import 语句导入非 typescript 库

和