问题标签 [react-forwardref]

我需要将我的自定义组件包装在 Material UI Tooltip 中。我相信我正在正确使用 ForwardRefs，但是无论事件如何（悬停、单击等），工具提示都不会出现

这是沙盒链接https://codesandbox.io/s/material-ui-card-styling-example-forked-9tqod?file=/src/index.js:438-914

我很难理解为什么打字稿编译器对我在组件中使用的 forwardRef 不满意。

对于下面的示例，我已将我的代码缩减为基本要素，确保此打字稿错误是代码中唯一出现的错误，根据我的实际代码中的问题：

当试图编译这个时，我得到了错误：

Property 'current' is missing in type '{ ref: RefObject<HTMLSelectElement>; }' but required in type 'RefObject<HTMLSelectElement>'.

在 VSCode 中，<SelectCountry ...是 IDE 发牢骚的地方，确切的消息是：

const SelectCountry: ForwardRefExoticComponent<RefObject<HTMLSelectElement> & RefAttributes<unknown>> Property 'current' is missing in type '{ ref: RefObject<HTMLSelectElement>; }' but required in type 'RefObject<HTMLSelectElement>'.ts(2741) index.d.ts(85, 18): 'current' is declared here.

我只是不明白为什么我会收到这个错误。

目前使用 React 17.0.2

Code follows this description.

react-phone-number-input allows uses to replace its default <input /> JSX tag with one's own, which specifically requires the type React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<any>> and needs a forwardRef (to allow access to the <input />).

Whilst I believe I have provided this with myTextInput the compiler is complaining that:

Property '$$typeof' is missing in type 'Element' but required in type 'ForwardRefExoticComponent<... and Type 'Element' is not assignable to type 'ForwardRefExoticComponent<...

OK, myTextInput = <ForwardedInput does return an <input /> JSX so yes it is a React Element and therefore the error messages make some sense. But said tag will resolve to a React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<any>> so how can I get the compiler to recognise that?

Thank you for reading.

forwardRef使用TypeScript时遇到问题。

我想要的是？ 将类型化的 ref 传递给子组件。

我得到 console.log 的价值是什么 -child component null

父组件代码

子组件的代码

我正在尝试用自定义组件替换@atlaskit/tree示例中的简单渲染项，但我遇到了各种问题，主要是因为我不知道如何将引用正确转发到组件。

有人可以向我解释如何正确实现这一目标。他们已经为我提供了一个带有其他道具的 innerRef，但我很难理解如何使用它。

我在这里有一个问题的沙盒：https ://codesandbox.io/s/hopeful-tdd-75n1v

我有一个使用 forwardRef 从父组件获取 ref 的子组件，但是，我很好奇如果我没有从父组件传入 ref 会发生什么。我测试了其他也在使用这个子组件的父组件，但没有传入 ref，它们似乎工作得很好。帮助表示赞赏！

我正在使用fluentui/react-nothstar包控件构建一个 React 网站。您可以在下面找到文本 + 按钮的简化示例。我的方案是在按下按钮时访问文本控件。我需要类似 document.findElementById 的东西，它通过React 中的 refs 工作。它适用于组件控件（扩展 React.Component），但对于 Northstar 组件失败并出现错误：

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

根据警告细节和 Text 控件定义，它看起来像是一个函数组件，我必须使用React forwardRef来访问它的属性。我在这里、这里和这里尝试了多种方法来做到这一点，但没有成功。

在大多数情况下，我可以通过使用 props 和 state 来避免直接访问元素，但在某些情况下，我仍然需要一个组件引用（更改焦点、打开对话框、更新未在我的 state 中定义的值）。

在上面的示例中，访问按钮单击处理程序中的 Text 控件的正确方法是什么？

我在 React 中制作了一个高阶组件，并且我在这个组件中构造了一个新的 ref，因为我想公开一些命令式操作。但是，如果可用，我还想公开包装组件的 ref，因此我决定将包装的 ref 分配给我的新命令句柄的原型。这会产生一个问题，因为我的组件的用户可能想要访问我的句柄，同时还包装了一个无法接收 ref 的功能组件。我的 HOC 如何检测它包装的组件是否可以引用？换句话说，如果被包装的组件是一个forwardRef组件还是一个类组件？

我想补充一点，我没有使用useImperativeHandle，因为每当被包装的组件调用我传递给它的 ref 时，我必须更改句柄，而不是每当 react 调用命令式句柄回调时，而是我做了一个小钩子它将函数引用和对象引用转换为我可以调用的函数。

我即将用新的 React Native Reanimated 替换旧的 React Native Animated 库以获得性能问题，但我遇到了一个我无法解决的问题。

在我在网上找到的所有示例中，我看到使用创建的GestureHandleruseAnimatedGestureHandler与Animated.View. 实际上，这有时是不可能的。

在我之前的应用程序中，我只是将GestureHandler对象传递给组件，forwardRef但似乎React Native Reanimated无法做到这一点。我不知道我是有语法错误还是只是一个错误。

我已将 GestureHandler 保存在 useAnimatedRef 中，以 handlerRef.current = useAnimatedGestureHandler({})使事情更具代表性。然后我将 ref 直接传递到组件的PanGestureHandler中UsingHandlerDirect。结果是，当我拖动蓝色框时，框将跟随处理程序。所以这个版本有效。

但是一旦我将手势事件传递handlerRef给UsingHandlerForwardRef组件，就会触发非手势事件。我希望当我拖动红色框时也会跟随处理程序，但它不会

有人知道是我还是图书馆中的错误？

干杯

问题：无法让 ref 从 {current: null} 更新为组件上的实际 ref。

我想要发生的事情： {current: null}，据我了解，应该更新以包含 ref 所在的 div，以便能够单击它的外部（最终关闭它）。9 了解它不会在第一次渲染时更新，但它永远不会更新。它确实在页面加载时运行了两次，都返回 current:null。

我尝试了什么：我遵循了所有 SO 建议来使用 useEffect，然后最终将其分离到这个函数中，这似乎是最合适和最新的方法来做到这一点。它只是从不更新当前。

模态内部

布局组件