问题标签 [refs]

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 投票
1 回答
279 浏览

javascript - 在 React 组件中公开第三方库(Firepad)方法

几个星期以来,我一直在寻找这个问题的答案,并且我已经阅读了我能找到的所有相关内容(在 SO、React 的文档中、在相关库(如 react-codemirror 等)的源代码中),并且找不到我能理解的答案。我在 React 上有点弱,这可能就是我失败的地方。

我正在开发一个使用 Firepad 的 React 项目(称为 Pharaoh,一个用于课堂的浏览器和桌面编辑器)(因此,我喜欢使用 Firebase 和 CodeMirror)。我已经使用了以上所有技术,包括使用 CodeMirror 编写桌面 Markdown 编辑器和使用 Firebase 的一些演示/实践应用程序。我在这里的问题几乎肯定是没有很好地理解 React 的问题之一。

我想要做的是能够将文件从我们的 Firepad/CodeMirror 实例中保存(到桌面)。我通常知道如何使用 FileReader 和 HTML5 Filesystem API,这甚至可以用 来完成node-fs,因为我的目标是我们的桌面应用程序(在 NW.js 上运行)。

CodeMirror 有一些非常有用的方法,例如editorName.codeMirror.doc.getValue()可以完美运行;Firepad 有更简单的editorName.firepad.getText().setText()我最终也会用它来从文件系统加载文件)。我知道这些是如何工作的,并且可以看到我将如何将它们返回并保存起来,这没问题。我的问题是我实际上无法访问这些方法。这可能是我应该知道的关于从第三方库或一般组件访问方法的一些愚蠢的事情,但我有点难过。我在工作中经常使用的一个工具 Codeshare.io,我相信它是内置在 React 中并使用 Firepad,它暴露了这些方法,所以我要深入研究它们的源代码(对 cURL 来说是的),看看我是否能找到任何答案,但任何更快的东西都会非常有帮助。

非常感谢!

注意:我想我需要获得更多的 SO 声誉;在发布之前删除/更改了一堆链接。

0 投票
1 回答
343 浏览

javascript - 销毁克隆元素后 Reactjs ref 丢失

当克隆的父级被卸载时,我在保持嵌套原始元素的引用时遇到问题。不知道我做错了什么。

有这样结构的页面

  1. Sortable 组件将每个子组件包装到 Sortable__item 组件
  2. 当用户开始对 Sortable__item 组件之一进行排序(拖动)时,我 React.cloneElement() original Sortable__item 将其显示为可拖动的阴影
  3. 它与所有子项一起克隆,在这种情况下,使用 Page 保存了 ref['Collapsible-1'] 的 Collapsible 组件。页面上的那个 ref 变成了这个 shadows ref。
  4. 一旦 touchEnd 启动,我会更新 Sortable 的状态以不显示阴影(它被卸载)。
  5. 当它被卸载时,它还会删除 Page 内的 ref(更改为 null)
  6. 问题:页面没有对原始可折叠的引用,因为首先它被更改为阴影,然后阴影被卸载,所以现在它为空

快速破解/修复来解决这个烦人的问题。这样,如果它们已经存在,则 refs 永远不会更新。这很糟糕,但我不知道还有什么办法可以防止这种情况发生。任何人都可以指出我正确的方向吗?

0 投票
3 回答
1028 浏览

javascript - 在 React 0.14.8 中使用 refs 时出错

我正在从我的应用程序中提取一些代码到一个开源包中。我的应用程序和我的包都依赖于相同版本的 React,0.14.8。

自从我将代码移动到包中(并进行了一些代码更改)以来,我一直无法呈现使用 refs 的组件。我已经寻找了几个小时的建议,它产生了两个基本提示:

  1. 确保反应版本不冲突
  2. 确保带有 refs 的组件是在另一个组件的渲染方法中创建的

据我所知,我满足了这两个标准。

当我尝试加载带有此组件的页面时,出现错误:

invariant.js:39 Uncaught Invariant Violation: addComponentAsRefTo(...): 只有 ReactOwner 可以有 refs。您可能正在向未在组件render方法中创建的组件添加 ref,或者您加载了多个 React 副本

refs=如果我从input标签中删除它,它就会呈现,但我显然需要那些。

我已经考虑过编写一个 reducer 来控制这些组件的状态的替代方案,但对于应该工作的东西来说,这是一项繁重的工作。

如何修复我的 refs 以使其正常工作?

更新

虽然我已经接受了这个问题的答案,因为它允许我像我想要的那样使用 refs,但问题仍然是为什么它首先会发生,并且调查显示最大的怀疑是 react 的多个版本。但据我所知,情况似乎并非如此。

0 投票
1 回答
324 浏览

javascript - reactjs 通过 refs 在组件之间进行通信

我有 3 个组件。一个父组件和两个子组件 (A,B)。第一个子组件 A 有一个触发父组件功能的按钮。父组件有一个开关来显示或不显示子组件 B。如果子组件 B 应该是可见的,它就会被挂载。从 parent 调用的函数 child A 现在执行组件 B 中的函数。

我试图通过在子组件 B 上提供一个 ref 属性来实现它。但是由于它没有安装的一个很好的理由是 initthis.refs是空的。如何在不安装所有可能的子组件 B(或以后的 C、D、E)的情况下实现这一点。

重要的是子 A 中的 onClick 事件始终触发引用的事件。

这是一个快速草稿:在此处输入图像描述

谁能给我一个提示来解决我的逻辑问题?

0 投票
1 回答
251 浏览

git - 使用过滤器分支更改 git 提交作者时出错

我正在尝试更改我的 git 提交的作者,因为我忘记更新我的全球电子邮件。我使用下面的代码来更改它(使用我自己的详细信息)。

脚本运行,但随后说:

我是一个 git 新手,在任何地方都找不到这个错误,这与用户有关吗?我试图通过源代码树运行它是我缺少的东西吗?

谢谢

0 投票
1 回答
595 浏览

javascript - Es6 对组件的 React Refs

如何使用 React 和 ES6 获取对组件的引用?

我有一个组件 A

还有另一个我想调用 ComponentA 方法的 Component B

如何获得对 ComponentA 的引用?我试过使用

但是由于我使用的是 Webpack 并且 ComponentA.jsx 是我的入口点,所以我得到了错误

有什么解决方法吗?

0 投票
0 回答
1918 浏览

php - 使用 GitHub API 和 php 创建一个新分支

我正在尝试使用 php、curl 和 GitHub API 进行一些 git 自动化。我首先通过创建拉取请求然后合并该拉取请求(全部通过 api)将功能分支合并到默认(主)分支中。

到目前为止,一切都很好。我从拉取请求合并中得到的响应是 sha 值,merged = true 和 message = '拉取请求成功合并'。

接下来,我使用 GitHub API 删除我的 dev 分支。那个操作也成功了。在执行的这一点上,当查看 github.com UI 的“所有分支”列表时,GitHub 上不再存在 dev 分支。

最后,我尝试使用将功能分支合并到主分支的拉取请求返回的 sha 来创建一个新的开发分支(根据https://developer.github.com/v3/git/refs/#create- a-reference ) 与端点:

/repos/{owner}/{repo}/git/refs

并发布数据:

{"ref":"refs\/head\/{dev-branch-name}","sha":"{sha-returned-from-previous-merge"}

我得到的回应是: { "message": "Reference already exists", "documentation_url": "https://developer.github.com/v3/git/refs/#create-a-reference" }

这让我没有新的开发分支。我的预感是从先前合并返回的 sha 不是我应该使用的 sha,但我找不到任何文档来解释我应该从哪里获取 sha 以创建新分支。据我所知,所需的 sha 应该是新分支应该从中分支的 ref 的那个,所以我希望将我的功能分支合并到默认(主)分支中产生的 sha 将是正确的一个。有谁知道我在这里错过了什么?

在此先感谢您的帮助!

-轴

0 投票
1 回答
66 浏览

reactjs - ReactJS - 无法获取有关输入的信息

我是 reactjs 的新手。我不知道如何获得输入字段的值。我向您展示如何编写组件的最佳方式:

如果我在 html 文档中呈现它,它工作正常!

然后,如果我调用该函数,我将获得所有信息。但我想把这个组件放在另一个组件中:

一个 JSPanel:

我想要的是通过函数从输入中获取信息:sendInformation()

我希望这很清楚我的意思,任何人都可以帮助我吗?

此致

0 投票
0 回答
388 浏览

reactjs - 使用 ref 并拥有 ProxyComponent 时如何访问实际组件

我们有一个 React 组件的引用,并且想要调用该组件的方法。使用 ref 时,它是一个“ProxyComponent”对象。我如何将它用作我的实际组件或如何才能做到这一点。我看到,属性“renderedElement”和属性“type”内部是我实际组件的正确类型。但是我没有找到像这样使用它/调用我的组件方法的方法。

0 投票
0 回答
120 浏览

reactjs - 无法将属性从父元素传递给 react-select 组件

我正在尝试将属性传递给来自其他组件的 react-select 元素,但出现以下错误

Uncaught Invariant Violation: addComponentAsRefTo(...): 只有 ReactOwner 可以有 refs。您可能正在向未在组件render方法中创建的组件添加 ref,或者您加载了多个 React 副本

我在此处查找错误的在线和 fb 文档https://gist.github.com/jimfb/4faa6cbfb1ef476bd105

并尝试了可能的解决方案,但仍然没有解决问题。

我正在使用reactver15.1并且react-select1.00 beta版本

这是示例代码:

在我的app.js

在我的resuable.js