问题标签 [react-tsx]

我在延迟加载组件的加载器上工作并遇到错误

TS2604：JSX elemy 类型“LoadedAsyncComponent”没有任何构造或调用签名

我想所以我写了一个糟糕的代码，因为我最近开始写 React + TypeScript 链

这是我的组件：

错误在这里：

moduleProviderprop 也是一个导入承诺：

我正在将我的小项目重写为 material-ui，并且我正在使用这个 material-ui-next reactjs 库；对于一个组件 withStyle 装饰器工作得很好，对于另一个它没有用样式装饰组件并引发此错误：

Uncaught TypeError: Cannot read property 'root' of undefined at Respondent.render (MuiRespondent.tsx:48) at vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:30228 at measureLifeCyclePerf (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29508) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext ( vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:30227) at ReactCompositeComponentWrapper._renderValidatedComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:30254) at ReactCompositeComponentWrapper.performInitialMount (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29794) at ReactCompositeComponentWrapper.mountComponent (vendor.js?v =OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690）在 Object.mountComponent（供应商。js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868) at ReactCompositeComponentWrapper._updateRenderedComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:30197) at ReactCompositeComponentWrapper._performComponentUpdate (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:30156)

引发错误的组件：

这是我的 withRoot 装饰器：

withStyle 装饰器适用的另一个组件看起来几乎相同，我想我遗漏了一些明显的东西，但看不到什么

我正在尝试使用 React 创建一个页面，从而可以更新状态的单个元素；这是状态的定义方式：

我的渲染函数中有以下内容：

还有handleChange（这是我的问题的核心）：

由于我使用的是 tsx，所以上面的函数甚至无法编译。但是，它确实说明了我正在尝试做的事情。通常，当我调用 时this.setState，我已经完成了一个完整的状态（也就是说，我知道整个新状态）。在这种情况下，我只想更改单个字段的内容：这可能吗？

我正在尝试将我在 Github 上的应用程序部署到 Heroku，但出现错误：

./src/Index.tsx 中的错误未找到模块：错误：无法解析“/app/src”中的“./ConfigureStore”@ ./src/Index.tsx 9:23-50

当我在 Heroku 上部署时，这似乎是 Typescript 问题。

虽然，在我的本地工作完美，webpack 生成包并且应用程序运行良好。下面是我的 webpack.config：

包.json

github代码网址在这里

请帮助我很久以来一直在这个问题上。

我是一个开玩笑的新手，我正在为我的 react 应用程序编写单元测试，该应用程序使用 redux 并用 Typescript 编写。

我的容器组件带有这段代码：

我想编写一个单元测试，检查当我从测试（onSelectScenario）调用这个道具时，该dispatch方法将使用正确的参数调用。

知道如何监视这个dispatch吗？

这是我调用 prop 方法的单元测试：

这是测试的设置，我在其中定义了提供模拟存储的容器组件：

我正在使用 Visual Studio 代码。如何在 .tsx 文件上启用 emmet？

我想要一个简单的

扩大到

但是，我尝试过的任何事情似乎都没有触发 emmet 上述所需的行为。

这是我的 VSC 设置：

在我的 React (v16.3) 应用程序中，我正在使用material-ui-pickers库的 DatePicker 组件呈现日期选择器控件。该组件呈现一个 Material-UITextField组件。我喜欢更改它，因此它只呈现 Material-UIInput而没有TextField.

据我了解，可以使用 DatePickersTextFieldComponent字段（位于底部） ，但我不知道如何使用该字段。

任何想法如何做到这一点？

更新： 通过找到正确的语法来使用更进一步，而不是在没有 chrome ( FormControl,InputLabel等) 的情况下呈现。但也不再打开 DatePicker。我必须以编程方式打开它吗？

这是renderInput()：

我正在尝试使用 Microsoft 提供的默认 React 模板根据用户在 React 应用程序中的状态向用户呈现视图。

这是我得到的错误：

错误图片

这是我的代码：

我必须加载非常不同的用户界面，但这基本上是站点视图的主机，其想法是子组件将让用户完成一个活动并更新 BiodieselStudio 中的状态，这将使应用程序正常工作如所须。

很多案例陈述没有填写，但它会遵循相同的模式！

非常感谢你们！

我有一个死的简单组件。在 javascript 中完美运行。

但在打字稿中不起作用。为什么？

两者都使用相同的 React 版本。

编辑：

打字稿： https ://codepen.io/anon/pen/eKGoWo

JavaScript： https ://codepen.io/anon/pen/GGMLOv

ES6 很棒，它减少了代码数量，但所有的打字稿都不起作用。

如果我想为我的参数实现类型检查，它已经被破坏了不止一个级别，那不是一团糟吗？我觉得一开始用interface做一次check就够了，你觉得呢？或者您可以对所有内容进行类型检查，但不要过度使用 es6 以获得更好的可读性。

打字稿游乐场：https ://codesandbox.io/s/v06ml2y130