问题标签 [ngreact]

使用 ngReact，如何优雅地设置双向数据绑定？

假设我有一个简单的 React 输入组件，它需要 avalue和 fires onChange：

然后从 AngularJS 方面，我希望value在范围内更新这样的内容：

但是，有没有更优雅的方法来设置到 AngularJS 范围的双向绑定，类似于ng-model？

[2015 年 7 月 23 日更新] 我想创建一个按钮列表，每个marker在ctrl.getMarkers(). 让我们假设标记类似于 marker: {'title':' '}.

使用经典的ng-repeat，我有以下

我有大约 100 个按钮要显示，但更新速度并不快。所以我想试试ng-react库。不幸的是，我还不太了解如何使用它。

到目前为止，我写了这个：

HTML

JS

我如何将ng-click,ng-class等与 React DOM 元素一起使用？

这是JSFiddle

[更新 2]

我找到了解决方案，并在下面回答了我自己的问题。但是，我仍然遇到一个减慢反应速度的问题：“不推荐尝试访问非节点对象上的属性 'nodeType'”。请在下面查看我的答案以获取有关该错误的更多信息。谢谢

我一直试图让它工作很长时间，但无论我做什么指令都找不到我的反应组件。

这些是我包括的文件：

我的组件在react-components.min.js文件中的位置，我的所有角度代码都在main.min.js.

据说您（可能（？））需要使用浏览器中的转换器才能使该指令起作用，因此我尝试使用 babel，但这也不起作用。

这是我的反应组件：

在 react-components.min.js 文件中，我得到了一个名为“Chat”的组件：

但它没有找到它.. 什么可能是错的，因为似乎没有其他人有这个问题？

当我修改我的 $watched 对象数组时，我正在尝试使用 ngReact 而不是 ngRepeat 来提高性能。

反应组件工作，html正确显示。对于控制器中包含的每个标记，我想创建一个<button>带有marker.titleas 文本的 ,。

但是它超级慢，比 ngRepeat 慢得多，并且控制台显示相同错误的无限列表：

这是我的 React 组件（在我的帖子末尾，有 JSfiddle 链接）

HTML

JS

这是我的问题的（新版本）JSFiddle。简要说明： - 有一个 MapBox 指令，用于在页面上显示地图。1s 后，它在地图上加载 3 个标记，以模拟 ajax 请求。- 对于每个加载的标记，它将推入list负责PanelController在左侧面板上显示标记名称的其中一个。名称由 React 组件显示，使用 ng-React。它可以工作，但是有一个错误会减慢整个系统的速度。

知道可能是什么问题吗？谢谢你

[9 月 24 日更新]

当我修改我的 $watched 对象数组时，我正在尝试使用 ngReact 而不是 ngRepeat 来提高性能。

对于控制器中包含的每个对象（地图标记），我想创建一个<button>带有marker.titleas 文本的 ,。为此，我创建了一个 $watches 标记数组的 React 组件。这样的 a 包含一个列表，每个标记一个。我认为只有当我修改标记列表，然后是按钮列表时，组件才会发生变化。然而，这种情况并非如此。

似乎<button>由 React 组件创建的列表结果总是不同的，即使是由相同的对象创建的。

现在奇怪的部分.. 实际上，我使用 Json 对象向地图添加标记。当我添加一个 Json 对象时，地图会创建一个Marker对象，而不是 jsonable，因为它具有循环结构。我将此Marker对象添加到我的 $watched 数组中，以创建相对<button>...也许这是illegal isArrayLike()错误的原因？

这是我的 React 组件（在我的帖子末尾，有 JSfiddle 链接）

HTML

JS

这是我的问题的 JSFiddle。简要说明：

• $rootScope 中有 2 个数组。temp_list 用于临时将所有标记一一推送。m_list 由 react 组件 $watched。
• 有一个 MapBox 指令及其控制器。对于添加到地图的每个标记，它将被推送到 temp_list 中。
• 一旦所有标记都已加载并且 temp_list 完成，它会被克隆到 m_list，因此可以更新 react 组件。

谢谢你

使用 JsxBundleConfig 构建 JSX，使用 Angular ngReact 指令在 Angular 内渲染反应。每次我尝试包含一个反应组件时，控制台中都会出现错误无法读取未定义的属性“渲染”，并且没有渲染任何内容

最近我发现了一个很棒的库，它允许在 Angular 应用程序中使用 React 组件，称为ngReact

我的问题是关于可以在 reactDirective 组件上声明的watch-depth属性：

查看reactDirective 服务的 ngReact 文档，我发现观察深度有 3 个可能的值：

• 参考
• 收藏
• 价值

在我最初使用 ngReact 的探索中，我一直坚持使用默认值选项。

我的问题是，这些类型之间有什么区别？

当每种观察深度类型都适合使用时，简单的例子会很棒！

我一直在尝试使用 ng-react 在我的项目中包含 reactjs，但是当我运行应用程序时会抛出错误“找不到反应组件 LoginComponent”。

结构：

• 组件（文件夹）
  • 登录组件.js
• 控制器（文件夹）
  • 登录.js
• 指令（文件夹）
  • 登录.js
• 视图（文件夹）
  • 登录.html
• 应用程序.js

索引.html：

应用程序.js：

登录组件.js：

login.js（指令）：

login.html（视图）：

login.js（控制器）：

有人知道是什么问题吗？

我是 React 的新手。

我想尝试合并此处找到的“ReactGridLayout”模块：https ://github.com/STRML/react-grid-layout

在我正在处理的 Mean.JS v0.4 项目中。

我首先将 ngReact 添加到我的项目并添加资产：

然后在我模型的 module.config 文件中：

在我的客户端控制器中，我添加了以下内容：

然后在我看来，我添加了：

但是，在页面加载时，我得到：

这并不完全出乎意料，STRML 的 ReactGridLayout 的文档包括：

但是，因为我试图将它包含在我的客户端控制器中，所以我不能使用“requires”，这就是为什么我试图将它添加为“资产”。

我怎样才能解决这个问题？

谢谢！

我有使用Angular 材料的 Angular 项目。由于性能问题，我决定React使用ngReact 指令集成到我的项目中。所以一切正常。顺便说一句，我安装了 react withbower而不是npm.

所以现在我正在尝试集成React Material UI，以便能够在 React 中使用诸如下拉菜单之类的 Material 组件，而不是在 Angular 材质中使用md-select 。

今天我用命令编译 reactjsx文件jsx，比如：

到目前为止，一切都很好。

React Material UI 没有，bower但是npm. 所以我安装material-ui了接下来呢？

如何使用反应组件？我需要一些js文件将其包含到我的index.html.

当我尝试包含时node_modules/material-ui/index.js，出现错误：

index.js:3 未捕获的 ReferenceError：未定义导出

这是一个index.js内容：

有没有人解决/使用这种方法？