我有这个

和这个

二_input是input标签的 ref 对象，我找不到它们之间的区别。

我的问题是：两者之间有什么区别_input，哪个_input更好？

我正在开发一个 React Native 应用程序。我现在在我的应用程序中所做的是我试图在我的组件上使用引用/引用。

这是我的代码

当我单击下载按钮时，出现以下错误。

我也试过这个。

和

我得到了同样的错误。我也试过这个。

在我添加的构造函数中

零件

和

我使用 react 创建了一个简单的 TodoList 并尝试将 GSAP 集成到项目中。这里我利用状态来创建受控动画。

问题是

当我将待办事项添加到列表时，待办事项正在添加，但元素的不透明度设置为 0。

帮助我什么时候出错。

项目链接

Todo.js组件

如何获取 Material UI 文本字段/输入中 InputProps 中传递的 Start Adornment 的宽度？

这是TextField的实现

我在 InputProps 中获取 startAdornment 并尝试将 ref 传递给它以在 componentDidMount 中获取它的宽度

我越来越不确定。我确实在 ref 的当前属性中获取了元素，但 offsetWidth 未定义。不知道这里有什么问题。

我在我的项目中使用了一个react-mui库，我想在其中实现一个组件，可以在此处MenuList的 MenuList 组合下找到。在我的应用程序中，虽然我将一个as发送到我有一个. 您可以在此处查看代码框示例。当我从这样的父组件发送一个和一个方法时：refpropchild componentmenurefsetRefprops

对于具有菜单按钮的子组件：

然后具有菜单列表的 Popper 组件在错误的位置打开，如果您单击TOGGLE MENU GROW button.

我做错了什么以及如何解决这个问题，或者我如何ref在一个stateless组件中使用我可以避免ref作为prop.

我有一个导航栏函数组件，它通过 onclick 回调将链接的名称传递给父组件，并进一步传递给主应用程序组件。应用程序组件有一个带有链接名称和关联引用的对象。应用程序组件中的 onclick 回调根据底层组件传递给它的链接名称从对象中获取 ref，并调用 window.scrollTo。window.scrollTo 在您第一次单击链接时起作用，并且如果从粘性导航栏中单击另一个链接，则当页面滚动时，窗口不会再次滚动，而是返回到 (0,0) 并从那里单击相同链接有效。

//在App组件中回调。

上面的函数传递给 Header 组件

并在标题中使用 NavLink 函数组件创建链接，其中 onClick 将返回链接名称。

我做错了什么，为什么当页面滚动到顶部而不是从页面中间或滚动位置时，scrollTo 在第二次单击时起作用。

我也尝试了其他滚动功能，但奇怪的是只有 scrollTo 滚动，而带有 scrollOptions、scrollToView、moveTo 等的滚动功能根本不起作用。

我在控制台中打印出 offsetTop 并触发 window.scrollTo(0,"offsetTop print in console")，工作正常，没有问题。

这是代码。

应用程序.js

页眉.js

我正在尝试将节点从 ref 传递到上下文。但是因为我在第一次渲染后没有重新渲染，所以传递的节​​点是null. 我考虑了两种变体（但我认为它们不是最好的）：

1. 通过ref而不是ref.current. 但是在用例中，我将被迫使用类似的东西contextRef.current而不是contextNode.

2. 在firstRender获得ref.current. 这似乎不是最优的。

什么是正确的（最好的？）方法？

代码沙盒

问题：

我有一个递归渲染嵌套列表的 React 功能组件。那部分工作正常。

我正在努力的部分是让包含嵌套列表的 div 在嵌套列表（不同大小）出现和消失时具有扩展动画。

因为内容的数量是未知的，所以简单地为 max-height 属性设置动画是行不通的。例如，当渲染一级列表时，框架的高度可能会扩大到 100 像素。但是，如果您将最大高度设置为 100 像素，则 div 稍后将无法扩展以容纳越来越多的嵌套列表。

需要动画的div是：

...并且不起作用的函数是名为“collapseFrame”的函数。

同样，我之前尝试在 max-height 属性上使用 CSS 过渡，但这远不是一个理想的解决方案，因为它在不可预测的高度上效果不佳。所以，如果可能的话，我不想那样做。

我遵循了一个教程，并在没有 React 的情况下使用 vanilla JavaScript（部分代码被注释掉），但是当将它翻译成 React 时，我不确定为什么我不能让代码工作。

目前，展开动画正在工作，但如果移除边框或将其更改为白色，它将停止工作。我不知道为什么。??

** 此外，折叠动画根本不起作用。'transitioned' 事件并不总是在 ref 对象上触发，有时会在它应该被删除后触发。

有人能帮我指出正确的方向吗？谢谢！

这是我的代码笔。

（我试图将它转移到 JS Fiddle，但它不起作用，所以请不要对此投反对票）。

https://codepen.io/maiya-public/pen/ZEzoqjW

（对 codepen 的另一次尝试，供参考。嵌套列表出现和消失，但没有过渡）。 https://codepen.io/maiya-public/pen/MWgGzBE

这是原始代码：（我认为在 codepen 上更容易理解，但粘贴在这里以获得良好的实践）。

索引.html

样式.css

虚拟数据：（嵌套列表将基于此对象呈现）

反应代码：index.js

我有一个table列表，其中每一行都有一个menu按钮，我需要一个ref. 我在我的项目中使用 react mui，它是menu。我尝试过像这样创建参考：

然后尝试map在每个上使用这样的函数内部button：

但是，然后我得到一个错误：

不能在回调中调用 React Hook “React.useRef”。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用 react-hooks/rules-of-hooks

我怎样才能动态地做到这一点，以便我可以在 map 函数中使用 refs。我已经尝试过答案中的建议，但我无法让它发挥作用。这是示例的代码框。

这个问题更多地与实施的绩效或最佳实践相一致。

根据 React Docs，作为 React16 一部分的 ref 只能用于基于类（有状态）的组件中。由于无状态组件没有实例或状态，我们不能在无状态组件中拥有 ref。

将无状态组件更改为有状态或基于类的组件以使用 refs 的权衡是什么？这是一种推荐的方法，或者如果它只是关于参考，我们可以使用文档参考的旧本机方法或获取元素参考的 Jquery。

将无状态组件更改为有状态组件是否仅用于使用 refs 而不是任何生命周期方法被视为最佳实践？