ref 相关问题

ref关键字导致参数通过引用传递，而不是通过值传递。通过引用传递的效果是方法中对参数的任何更改都会反映在调用方法中的基础参数变量中。引用参数的值始终与基础参数变量的值相同。

如何在React中使用forwardRef输入多个引用？

我有父组件，我在其中定义了一些引用。然后我创建一个包含所有这些引用的对象。然后将此对象传递给子组件的 ref 。父组件只是一个页面组件，子组件

javascript reactjs typescript ref react-forwardref

回答 1 投票 0

C# 取消引用在幕后如何工作

这段代码来自名为“Pro C# with .NET 6”的书，我想知道当对引用（ref Person p）的引用传递给该方法时幕后会发生什么。例如，当我们...

c# pointers reference ref dereference

回答 1 投票 0

错误无法在Vue脚本设置中通过ref获取函数

我正在用 Vue 3 做一个翻转纸牌游戏并使用。当我尝试在选择两张不同的卡片时处理卡片翻转时遇到了麻烦。我的代码旨在翻转卡片，使用它......</desc> <question vote="1"> <p>我正在使用 Vue 3 并使用 <pre><code><script setup></code></pre> 制作翻转纸牌游戏。当我尝试在选择两张不同的卡片时处理卡片翻转时遇到了麻烦。我的代码旨在在选择错误时翻转卡片使用其索引</p> <ul> <li>文件 InteractScene.vue</li> </ul> <pre><code><script setup> import CardGame from "@/components/CardGame.vue"; import { ref } from "vue"; const rules = ref([]); defineProps({ cardContext: { type: Array, default: () => [] } }); const checkRule = (card) => { let rule = rules.value; if (rule.length === 2) return false; rule.push(card); if (rule.length === 2 && rule[0].value === rule[1].value) { console.log("true..."); } else if (rule.length === 2 && rule[0].value !== rule[1].value) { console.log(`card-${rule} and card-${rule[1].index}`); ref.value[`card-${rule[0].index}`][0].onFlipBackCard(); ref.value[`card-${rule[1].index}`][0].onFlipBackCard(); } else return false; }; </script> <template> <div class="scene"> <h1>Interact Component here</h1> <CardGame v-for="(card, index) in cardContext" :key="index" :ref="`card-${index}`" :img-back-face-url="`images/${card}.png`" v-bind:card="{ index, value: card }" :rules="rules" @flip="checkRule($event)" /> </div> </template> </code></pre> <ul> <li>文件 CardGame.vue</li> </ul> <pre><code><script setup> import { ref } from "vue"; const emits = defineEmits(["flip"]); const isFlipped = ref(false); // eslint-disable-next-line vue/valid-define-props const { card, imgBackFaceUrl } = defineProps({ card: [String, Number, Array, Object], imgBackFaceUrl: String }); const onToggleFlipCard = () => { isFlipped.value = !isFlipped.value; if (isFlipped.value) { emits("flip", card); } }; const onFlipBackCard = () => { isFlipped.value = false; } </script> <template> <div class="card"> <div class="card-inner" :class="{'is-flipped': isFlipped}" v-on:click="onToggleFlipCard" > <div class="card-face card_face-font"> <div class="card-content"></div> </div> <div class="card-face card_face-back"> <div class="card-content" :style="{ backgroundImage: `url('/src/assets/${imgBackFaceUrl}')`}"> </div> </div> </div> </div> </template> </code></pre> <p>我在网络控制台上收到此错误 <a href="https://i.stack.imgur.com/AZZZf.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL0FaWlpmLnBuZw==" alt="enter image description here"/></a></p> <p>在我看来，问题可能是提供者或接收者没有提供参考。在 InteractScene.vue 中，错误来自</p> <pre><code>... ref.value[`card-${rule[0].index}`][0].onFlipBackCard(); ref.value[`card-${rule[1].index}`][0].onFlipBackCard(); ... </code></pre> <p>而GameCard.vue中，onFlipBackCard就是参考函数</p> <pre><code>const onFlipBackCard = () => { isFlipped.value = false; } </code></pre> <p>我在上面的代码中使用正常的<pre><code><script></code></pre>并且它可以工作。我是 Vue 3 的新手，所以我仍然想使用 <pre><code><script setup></code></pre> 来获取更多知识。我希望我能在<pre><code><script setup></code></pre>中获得解析代码。</p> <p>正常<pre><code><script></code></pre>代码：</p> <ul> <li>InteractScene.vue</li> </ul> <pre><code><script> import CardGame from "@/components/CardGame.vue"; export default { props: { cardContext: { type: Array, default: function () { return [] } } }, components: { CardGame }, data() { return { rules: [] }; }, methods: { checkRule(card){ console.log(card) if(this.rules.length === 2) return false this.rules.push(card) if(this.rules.length === 2 && this.rules[0].value === this.rules[1].value){ console.log("true...") } else if(this.rules.length === 2 && this.rules[0].value !== this.rules[1].value){ console.log("Wrong...") this.$refs[`card-${this.rules[0].index}`][0].onFlipBackCard(); this.$refs[`card-${this.rules[1].index}`][0].onFlipBackCard(); this.rules = [] } else return false } } }; </script> </code></pre> <ul> <li>CardGame.vue</li> </ul> <pre><code><script> export default { props: { card: { type: [String, Number, Array, Object] }, imgBackFaceUrl: { type: String, required: true } }, data() { return { isFlipped: false }; }, methods: { onToggleFlipCard() { this.isFlipped = !this.isFlipped; if(this.isFlipped) this.$emit("flip", this.card) }, onFlipBackCard(){ this.isFlipped = false } } } </script> </code></pre> <p>我的源代码：<a href="https://github.com/Jdsatashi/Vue-PokeGame" rel="nofollow noreferrer">https://github.com/Jdsatashi/Vue-PokeGame</a></p> </question> <answer tick="false" vote="0"> <p><pre><code>ref.value</code></pre> 与 <pre><code>this.$refs</code></pre> 不同。相关的 Vue 3 文档应该可以解决这个问题，那就是 <a href="https://vuejs.org/guide/essentials/template-refs.html#template-refs" rel="nofollow noreferrer">Template Refs</a> 上的页面。</p> <p>您必须声明自己的自定义 <pre><code>ref</code></pre> 数组，它将保存 DOM 元素的 <pre><code>:ref=</code></pre> 属性。 ref 属性也应该与您的 ref 变量名称完全相同。</p> <pre><code>const cards = ref([]) </code></pre> <pre><code><CardGame v-for="(card, index) in cardContext" :ref="cards" ... /> </code></pre> <p><pre><code>cards</code></pre> 是一个可搜索的索引数组，您可以在代码中的其他位置引用以在需要时查找所需的任何元素。</p> <pre><code>cards.value[0].onFlipBackCard(); </code></pre> <hr/> <p>作为旁注，我建议使用比索引更好的<pre><code>:key</code></pre>，因为它对于跟踪列表的更改并不可靠。它在某些情况下可以正常使用，但如果您的应用程序涉及任何类型的添加、删除或更改您的卡列表，您将需要一个独特的属性，例如某种唯一的 id。</p> </answer> </body></html>

javascript vue.js vuejs3 ref

回答 0 投票 0

React - useRef 与 TypeScript 和功能组件

我正在尝试使用 useRef 从父组件调用子组件方法。将来，SayHi 方法将更新子组件中的钩子状态。不幸的是，我有错误......

reactjs typescript ref tsx react-functional-component

回答 3 投票 0

与 rust RefCell<T> 和 Ref

我正在努力解决为什么下面的代码无法编译。我正在尝试创建一个具有两个节点的双向链表。然后从子节点指针访问父节点的值。使用 std::cell::RefCell...

rust ref refcell

回答 1 投票 0

使用 { ref } 检索 div 坐标

我正在 VUeJS 的聊天项目中工作，我想创建一个工具提示，出现在我将鼠标指针悬停在其上的用户名顶部。这是我的代码：我正在 VUeJS 的聊天项目中工作，我想创建一个工具提示，出现在我将鼠标指针悬停在用户名上的工具提示。这是我的代码： <template> <Tooltip :user="user" :selectedUser="tooltipUser" :left="left" :top="top" v-if="tooltipVisible" /> <div class="socialUsers" v-show="activeTab === 'users'"> <div class="user" v-for="user in users" :key="user.id"> <img class="avatar" :src="getUserAvatarUrl(user.avatar)" :alt="user.username" ref="chatTooltip" @click="displayTooltip(user)"> <span class="username" :style="{ color: user.usernameColor }">{{ user.username }}</span> </div> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue' import User from '@/models/user.model' import Tooltip from '@/components/profile.tooltip.vue' defineProps<{ activeTab: string users: User[] user: User | null }>() const tooltipVisible = ref(false) const tooltipUser = ref<User | null>(null) const user = ref(tooltipUser) const left = ref(0) const top = ref(0) const displayTooltip = (user: User): void => { tooltipUser.value = user tooltipVisible.value = !tooltipVisible.value const chatTooltip = this.$refs.chatTooltip if (chatTooltip) { const rect = chatTooltip.getBoundingClientRect() left.value = rect.x top.value = rect.y } } const getUserAvatarUrl = (filename: string): string => { return `http://${process.env.VUE_APP_BACKEND_HOST}:${process.env.VUE_APP_BACKEND_PORT}/users/avatar/${filename}` } </script> 我想将我想要使用 this.$refs.chatTooltip 检索的变量“left”和“top”传递给工具提示组件有可能吗？有更好的解决方案吗？非常感谢您的帮助，棒极了我不确定是否正确理解了你的问题。但我认为这是关于找到被点击的img的ref。这里您的 ref chatTooltip 是一个数组（如 v-for 中的 Refs 所示）。您应该能够使用被单击的用户的索引来获取正确的引用。我不太确定我的TS代码，但应该是这样的。 <div class="user" v-for="(user,i) in users" :key="user.id"> <img class="avatar" :src="getUserAvatarUrl(user.avatar)" :alt="user.username" ref="chatTooltips" @click="displayTooltip(user,i)"> <span class="username" :style="{ color: user.usernameColor }">{{ user.username }}</span> </div> const tooltipVisible = ref(false) const tooltipUser = ref<User | null>(null) const user = ref(tooltipUser) const left = ref(0) const top = ref(0) const chatTooltips = ref([]) const displayTooltip = (user: User, i: number): void => { tooltipUser.value = user tooltipVisible.value = !tooltipVisible.value const chatTooltip = chatTooltips.value[i] if (chatTooltip) { const rect = chatTooltip.getBoundingClientRect() left.value = rect.x top.value = rect.y } }

javascript typescript vuejs3 ref

回答 1 投票 0

在自定义模式中实现 dbt 模型

我的dbt项目中有model2.sql 选择 * 来自 {{ ref('model1') }} 编译后我需要得到选择 * 来自 'dwh'.'analytics'.'model1' 并将其具体化为模式“analytics_test ...

model macros materialize ref dbt

回答 1 投票 0

this.$refs.myForm.validate 不是我的 vue 组件中的函数

规则有效并显示正确的验证消息。当 this.valid 为 false 时，该按钮被禁用。每次输入都会调用 checkTextBoxValidation 方法来检查 ...

typescript vue.js validation vuetify.js ref

回答 1 投票 0

为什么在使用 ref 时不传递样式组件对象的值

styled-component Styled = styled.divmargin: 0; 的值未传递给 ref 元素。但是当我使用内联样式时，样式会传递给元素。请参阅附图。使用我...

reactjs dom styled-components ref inline-styles

回答 0 投票 0

如何在功能组件中访问映射 div 的内容（DOM 节点）

我的代码：https://codesandbox.io/s/quirky-wescoff-44n2by?file=/src/App.js 当我将鼠标悬停在任何元素上时，总是在控制台中打印数组的最后一个元素。我尝试使用 ref，不确定我是否...

javascript reactjs arrays dom ref

回答 2 投票 0

属性上的 typescript 引用错误 - vuejs

我正在使用 Vue 2.6.14 我想根据存储在 ref 中的 URL 显示 img。问题是每当我想从 ref 中检索值时，我都必须执行 propName.value。当我这样做时：src=specificImg.val...

typescript vue.js vuejs2 ref

回答 1 投票 0

为什么在递归方法中使用 ref 是危险的？

我在leetcode上解决了以下问题：给定二叉树的根和整数 targetSum，返回 true 如果树有一条从根到叶的路径，使得将所有值相加沿着...

c# recursion binary-tree ref

回答 1 投票 0

引用外部函数传递的结构具有未设置的字段

c 标题摘录：结构 GetArgvOptions { 单位跳过； pid_t pid；布尔值； }; bool get_argv_of_pid(const struct GetArgvOptions* options, struct ArgvResult* result); 时间：2018-01-08 标签：c#classlib

c# c struct pinvoke ref

回答 0 投票 0

JAVA/XML 解析所有 ref

我们正在使用一个包含许多引用的大型 XML 文档。使用 JAXB，我们成功地解组了文档。使用一种方法，我们传递节点以使用简单的三元运算符解析引用：

java xml jaxb ref

回答 1 投票 0

React 使用 ref 访问 innerhtml

我无法使用引用访问我的元素的内部 html。我的元素的 ref 被输出，但是 element.innerHTML 被输出为未定义，这是为什么？ const MyEditableComponent = ({ 内容 ...

reactjs react-hooks ref

回答 0 投票 0

Type error pass dynamic generic type to forwardRef React TypeScript

我在 TypeScript 中有一个带有 forwardRef 的 React 组件 const MyComponent= (道具 :PropsWithForwardRef 我在 TypeScript 中有一个带有 forwardRef 的 React 组件 const MyComponent= <TData, D extends ElementType = TableRowTypeMap['defaultComponent'],P = {}> (props :PropsWithForwardRef<TData, D, P>) => { return () } const FinalComponent: (<TData, D extends ElementType = TableRowTypeMap['defaultComponent'],P = {}>(props: PropsWithStandardRef<TData, D, P>) => ReactElement | null) = forwardRef<ReactTableRef<any>, ReactTableProps<any, any, any>>((props, ref) => <MyComponent {...props} forwardedRef={ref} />); export default FinalComponent; 我使用 This solution 来做到这一点，它工作正常，但出现类型错误（不停止应用程序）： Type 'PropsWithForwardRef<any, any, any>' is not assignable to type 'PropsWithForwardRef<TData, D, P>'. 我认为解决方案是通过 TData、D 和 P，但是当我这样做时： const FinalComponent: (<TData, D extends ElementType = TableRowTypeMap['defaultComponent'],P = {}>(props: PropsWithStandardRef<TData, D, P>) => ReactElement | null) = forwardRef<ReactTableRef<TData>, ReactTableProps<TData, D, P>>((props, ref) => <MyComponent {...props} forwardedRef={ref} />); ----- ----- - - 我有错误：找不到名字TData，D和P!! 为什么？什么是解决方案？

reactjs typescript ref

回答 0 投票 0

创建 React Ref 然后传递给组件

我正在根据我创建的对象动态制作各种 div，然后允许用户编辑 div，但我需要访问 div 上的 ref，以便我可以检查 div 的位置...

reactjs dom redux next.js ref

回答 0 投票 0

如果 setInterval 是通过 vue2 中的父组件的 ref 调用的，如何清除 clearInterval？

我有一个父级，我在其中调用带有 ref 的函数 startTimer()，我想直接在子组件中停止此 Timer，但这不起作用。我在某处读到箭头在...

vuejs2 parent-child setinterval ref clearinterval

回答 0 投票 0

无法检索用户的IP

我一直在尝试在vue 3中获取用户的ip地址并设法再次使用它，但我没有弄清楚我想将输出数据存储到 ref 因为可以保存在 firebase firestore db 中我正在尝试...