问题标签 [reactjs.net]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
2065 浏览

reactjs - 如何将我的 .tsx 文件转换为 ReactJS.NET 所期望的 .jsx 语法?

我正在使用ReactJS.NET。我可以让React.Sample.Webpack演示工作,但我想修改它以使用 TypeScript。

@Html.React("Components.Temp", new { })最终错误是从Index.cshtml. 这是错误消息:

将“Components.Temp”渲染为“react_3FYDPtcTMkKrddTO7ozOCA”时出错:脚本抛出异常:元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:对象。

问题

演示项目中使用的 .jsx 文件以以下语句结尾:

注意使用module.exports. tsc 生成的代码改为:

此外,在 tsc 生成的 .jsx 文件中,导入的组件default添加了一个属性。从Temp.jsx下面的文件:

注意default附加到TempImport_1

如果我手动更改 tsc 生成的 .jsx 文件以使用modules.export = Tempand <TempImport />,一切正常。

问题

  1. 如何生成可由 ReactJS.NET Html 帮助程序使用的 .jsx 文件?
  2. 有这个设置tsconfig.json吗?
  3. 有没有我可以添加的加载器来解决webpack.config.js这个问题?

编辑

如果我export default从 .tsx 文件中的类定义中删除并module.exports = ComponentName在最后手动添加,则生成的 .jsx 文件也有module.exports。但是,default仍然添加到所有导入组件的末尾。请参阅本文末尾的“尝试 2”代码。

相关文件

临时导入.tsx

临时文件

tsconfig.json

TempImport.jsx(由 tsc 生成)

Temp.jsx(由 tsc 生成)

webpack.config.js

Temp.tsx(尝试 2)

注意我已删除export default并添加module.exports = Temp

Temp.jsx(尝试 2 - 由 tsc 生成)

请注意,它现在module.exports = Temp位于底部,但<TempImport_1default附加在其上。

0 投票
1 回答
423 浏览

javascript - 将 reactjs.net 与 webpack 一起使用时,'require' 未定义

我在 MVC 5 项目中使用 Reactjs.NET,我们已经能够将 Webpack 与 reactjs.net 结合起来,但目前我们在使用外部模块时遇到了问题,例如我们的 react 组件目录中的 (material-ui)。由于 reactJs.NET 不支持导入,我们试图使用 require 语句将它们包含在 JSX 组件中,但是我们得到一个脚本抛出异常:'require' is undefined

知道如何将 webpack 包中的一些模块包含在我们的 jsx 组件中吗?

0 投票
0 回答
192 浏览

c# - ReactJS.Net 服务器端渲染未初始化处理程序

reactjs.net 的新手。我尽力按照https://reactjs.net/guides/server-side-rendering.html网站上的说明进行操作,但我仍然收到以下参考错误:我的组件:未定义注册。页面呈现,但注册组件似乎不存在。我究竟做错了什么?

反应配置.cs:

注册.cshtml:

0 投票
0 回答
374 浏览

c# - 使用 ES6 时服务器端渲染失败

我目前正在玩ReactJS.NET使用webpackand TypeScript。我找到了一些我想尝试的代码。有人来电Object.assign

由于 TS 编译器抱怨,我在 tsconfig.json 文件中切换到 es6。

但从那时起,当我尝试在服务器端呈现组件时,总是会出现以下错误:

脚本抛出异常:Minified React 错误 #130;

而且我不知道是什么导致了错误。它还声明使用非缩小的开发环境。但我也不知道该怎么做。

当我使用ReactDOM.render(<CommentBox />, document.getElementById('target'))它时,它可以正常工作。

这是我的(简化的)CommenBox.tsx文件

这是tsconfig.json

最后是我的webpack.config.js

在评论中,我现在收到以下错误消息:

元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件)但得到:对象。

谷歌搜索将我带到这篇 SO-article。所以这似乎与出口的完成方式有关,但我不明白这一点。

当作为最后一条语句编写时export = CommentBox;,它在服务器端构建和呈现,但给了我以下 ReSharper 错误:

以 ECMAScript 6 或更高版本为目标时,不能使用导出分配。

0 投票
1 回答
917 浏览

azure - 未找到反应组件

我正在 asp.net 核心上制作一个 React 应用程序。我使用 ReactJS.NET 库和 webpack 作为 jsx 组件的捆绑器和转译器。

我让它在本地工作,但是当我部署到天蓝色时,我得到了这个日志:

来自 ReactJS.NET Docs,“从 2.2 版开始,ReactJS.NET 使用 V8 JavaScript 引擎在 Azure 中开箱即用”。它说“.SetAllowMsieEngine(false); on app.UseReact()”,但现在已弃用...

不知道该怎么做:/提前谢谢

0 投票
2 回答
869 浏览

reactjs - ReactJs Ajax 获取

我正在尝试使用按钮的 onClick 在 reactJs 组件中执行正常的 ajax get 调用。当我尝试使用以下代码时,没有任何反应,但 api 是实时的并且正在工作。它甚至不会将任何内容记录到浏览器控制台。我做错了什么?我是 reactjs 的新手,所以我很抱歉。我正在将 reactJS.net 与 mvc 5 和 web api 2 一起使用。我只是想看看我是否可以通过它的路由访问 webapi v2 函数。路由本身可以正常工作,我可以触发断点,但不能从 reactJs onClick 事件触发

});

0 投票
1 回答
100 浏览

c# - reactjs.net 线程被中止

我们使用 Ractjs 3、JavaScriptEngineSwitcher 和 Microsoft.ChakraCore 开发了我们的代码。

有时,我的应用程序需要几秒钟来加载页面,但我的应用程序日志中没有任何错误,因此我决定使用 Windows 服务器上的 DebugDiag 工具对其进行诊断。然后我发现了几个与 Chakra 相关的 ThreadAbortException。

System.Threading.ThreadAbortException

威胁已经被清除了

System.Threading.WaitHandle.WaitOneNative(System.Runtime.InteropServices.SafeHandle, UInt32, Boolean, Boolean) System.Threading.WaitHandle.InternalWaitOne(System.Runtime.InteropServices.SafeHandle, Int64, Boolean, Boolean) System.Threading.WaitHandle。 WaitOne(Int32, Boolean) JavaScriptEngineSwitcher.ChakraCore.ScriptDispatcher.StartThread() System.Threading.ExecutionContext.RunInternal(System.Threading.ExecutionContext, System.Threading.ContextCallback, System.Object, Boolean) System.Threading.ExecutionContext.Run(System .Threading.ExecutionContext, System.Threading.ContextCallback, System.Object, Boolean) System.Threading.ExecutionContext.Run(System.Threading.ExecutionContext, System.Threading.ContextCallback, System.Object) System.Threading.ThreadHelper.ThreadStart()

20% 的线程有:。

入口点 ChakraCore!JsDisposeRuntime+12a44

调用堆栈

ntdll!NtWaitForMultipleObjects+14

KERNELBASE!WaitForMultipleObjectsEx+ef

脉轮核心+bd824

ChakraCore!JsDisposeRuntime+26ee

ChakraCore!JsDisposeRuntime+12aa1

kernel32!BaseThreadInitThunk+14

ntdll!RtlUserThreadStart+21

还有另外 20% 有:

入口点 ChakraCore!JsDisposeRuntime+12a44

调用堆栈

ntdll!NtWaitForMultipleObjects+14

KERNELBASE!WaitForMultipleObjectsEx+ef

ChakraCore!JsGetPropertyIdFromName+1673

ChakraCore!JsGetPropertyIdFromName+1410

ChakraCore!JsGetPropertyIdFromName+993

ChakraCore!JsDisposeRuntime+12aa1

kernel32!BaseThreadInitThunk+14

ntdll!RtlUserThreadStart+21

0 投票
0 回答
93 浏览

node.js - 根据文件系统信息在 webpack 中打包和暴露 react 组件

我正在将 reactjs.net 与 Webpack 一起使用,并且我正在尝试加载与我的 index.js 位于同一文件夹/子文件夹中的所有组件

然后需要 index.js,如下所示:

自然地,Webpack 只是将整个 addFolder 函数打包到输出中,这当然不会在客户端工作。显然我想在 index.js 中执行代码,所以现在我很好奇如何在不手动声明的情况下加载我的所有组件并将它们全局公开在 Components 对象中,同时使用文件名作为标识符。

0 投票
2 回答
3907 浏览

javascript - 如何在 ReactJS 中解析 Json 对象

我想通过 reactJS 中的 JSON 列表进行解析。这是我正在使用的模型

我的控制器是

这就是我在 ReactJS 代码中尝试提取每个值的方法

它不工作。但是当我用这个改变 setState 时,

它可以正常工作,并且可以通过员工列表。但无法访问 pagenumber 和 count 变量。你能帮我解决这个问题吗?提前致谢。

0 投票
2 回答
15629 浏览

reactjs - reactjs中如何从另一个组件刷新一个组件的数据

我是反应 js 并使用一些基本 CRUD 操作创建一个示例应用程序的新手。
我可以显示一个列表,但我不知道是否删除任何记录然后如何刷新数据网格。

这是我的代码:

我想在ajax成功时GirdDeleteRow组件刷新组件的数据,我该怎么做?我在这个网站上遇到了几个问题,但到目前为止还没有运气。