标签: react-forwardref
React 开发工具中组件的forwardRef 是什么意思以及如何使用它？
当我在 React 开发工具中检查组件结构时，我可以看到有一个forwardRef标记。我很困惑，因为源代码中没有使用它的迹象。它是怎么存在的以及我该如何使用它？
推荐指数
解决办法
查看次数
React.forwardRef 没有它已经是可能的了，那么它有什么用呢？
我对React.forwardRef. 正如其文档中所解释的，我知道它的主要用途是让父组件访问子组件的DOM元素。但我已经可以做到这一点，甚至不必使用它。
这是一个代码示例，您可以将其插入 CodeSandbox 并查看它是否有效：
import React, {useRef, useEffect} from "react";
import "./styles.css";
const ChildComponent = (props) => {
useEffect( ()=> {
props.callbackFunction()
})
return(
<div ref={props.fRef}>
{"hello"}
</div>
)
}
export default function App() {
const callbackFunction = () => {
console.log("The parent is now holding the forwarded ref to the child div: ")
console.log(forwardedRef)
}
const forwardedRef = useRef(null)
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<ChildComponent name="gravy" callbackFunction={callbackFunction} fRef={forwardedRef}/> …推荐指数
解决办法
查看次数
React - 在组件中使用forwardRef，打字稿错误 - 缺少属性“current”
我很难理解为什么打字稿编译器对我在组件中使用的forwardRef不满意。
对于下面的示例，我已将代码精简为最基本的内容，确保此打字稿错误是代码中唯一出现的错误，根据我的实际代码中的问题：
import { createRef, forwardRef, RefObject } from 'react';
const MyComponent = () => {
const selectCountryRef = createRef<HTMLSelectElement>();
return (
<div>
<SelectCountry ref={selectCountryRef} />
</div>
);
};
const SelectCountry = forwardRef((ref?: RefObject<HTMLSelectElement>) => {
return (
<FormFieldSelect ref={ref} />
);
});
const FormFieldSelect = ({ ref }) => {
return (
<div>
<select ref={ref}>
</select>
</div>
);
};
当尝试编译这个时，我收到错误：
Property 'current' is missing in type '{ ref: RefObject<HTMLSelectElement>; }' but required in type 'RefObject<HTMLSelectElement>'.
在 VSCode 中，<SelectCountry …
推荐指数
解决办法
查看次数
React.ForwardRef 丢失泛型类型的推断类型
我正在使用 React，在本例中使用的是功能React.forwardRef.
我遇到的问题是，使用 后，在使用 包装的组件时React.forwardRef，我丢失了泛型类型的推断类型。TReact.forwardRef
让我用一个例子来解释一下；采取这个代码：
interface IUser {
nickname: string;
}
interface IList<TRecord> {
items: TRecord[];
children: (item: TRecord) => React.ReactElement;
}
export const List = <TRecord extends unknown>(props: IList<TRecord>) => {
return (
<ul>
{props.items.map(x => <li>{props.children(x)}</li>)}
</ul>
);
}
export const MyApp = () => {
const items : IUser[] = [];
return (
<List items={items}>
{item => <p>{item.nickname}</p>}
</List>
);
}
当我在of{item.nickname}内部编写时，TypeScript 可以根据传递给 的props推断出 的类型。returnMyAppitem …
推荐指数
解决办法
查看次数
即使使用备忘录，使用forwardRef做出反应也总是更新子组件
所以我有一个 DatePicker ChildComponent，我需要从Parentref访问它。基本上一切正常。forwardRef
但有一个问题。
每次我更新与DatePickerChild没有任何关系的Parent Other ChildComponents上的某些内容时，DatePicker 仍然会呈现，即使它不应该呈现。
我尝试删除从父级到子级的引用传递，然后每次我对我想要解决的其他组件进行更新时，该组件就不再重新渲染。
<NativeDatePicker
ref={datePickerRef} // <-- When I comment this component is not rendering anymore.
currentDate={values.birthday}
onDateChange={handleBirthdayChange}
/>
我已经开始通过使用useCallback来优化回调记忆，但仍然没有运气。
下面是我的代码：
日期选择器.tsx
type Props = {
// ref: RefObject<DatePicker>;
currentDate: string | Date | undefined;
onDateChange: (newDate: string) => void;
};
const NativeDatePicker = forwardRef(
({ currentDate, onDateChange }: Props, ref: any) => {
console.log('tadah!');
return (
<DatePicker
ref={ref}
style={wrapperStyle.wrapper}
date={currentDate}
mode="date"
placeholder="select date" …推荐指数
解决办法
查看次数
React TypeScript 和 ForwardRef - 类型“IntrinsicAttributes”上不存在属性“ref”
在花了相当长的时间与 React 和 TypeScript 中的类型和前向引用进行斗争之后，我希望其他人能为我解决这个问题。
我正在构建一个 DataList 组件，它由三部分组成：
- 保存所有事件监听器和逻辑的容器
- 列表本身，一个
ul - 列表项，一个
li
最终，用法将如下所示：
<DataList.List ...>
<DataList.Item ...>content</DataList.Item>
</DataList.List>
为了实现我需要的功能，我正在利用 React.forwardRef，但发现使用 TypeScript 很难做到这一点，因为我很难正确输入组件来接收ref以及children附加的 props。
DataListContainer
我本质上希望该组件在返回主 DataList 组件（如下所示）时仅处理逻辑和事件侦听器。但这里的关键是，我需要在此处创建 DataList 引用并将其分配给返回的组件。
const DataListContainer: React.FC = ({ children }) => {
const listRef = useRef<HTMLUListElement>(null);
return (
<DataList ref={listRef}>{children}</DataList>
);
};
DataList
我希望 DataList 组件只处理它的 UI 和 props。
interface Props extends TestId {
focusedItemId?: string;
}
const DataList: React.FC<Props> = React.forwardRef<HTMLUListElement, Props>(
({ children, focusedItemId, testId }, ref) …推荐指数
解决办法
查看次数
对children prop 做出反应
我有以下组件来决定是否应根据用户权限呈现组件：
const Can = forwardRef(({ requiredPermissions, children }, ref): null | JSX.Element => {
const {
user: { role },
userPermissions,
} = useAuth();
return userHasPermission(role, userPermissions, requiredPermissions) ? children : null;
});
export default Can;我需要做的是将 传递给使用该组件时ref将在内部的子组件。Can
我怎样才能做到这一点？
推荐指数
解决办法
查看次数