React-Hooks- 如何使用 FlatList 为渲染项中的每个渲染项分配唯一的"ref"？

Question

我正在尝试将类组件转换为函数组件，并努力将引用分配给平面列表中的每个渲染项。

这是原始类组件。

... 
constructor(props) {
super(props);
this.cellRefs = {};
}
....

_renderItem = ({ item }) => {
return (
<Item
ref={ref => {
this.cellRefs[item.id] = ref;
}}
{...item}
/>
);
};
...

Answer 1

假设您的 Item 和呈现 FlatList 的组件都需要是功能组件，您需要处理 2 件事

• 向每个条目组件添加动态引用
• 确保 Item 组件将useImperativeHandle与 forwardRef 一起使用以公开函数

const App = () => {
const cellRefs = useRef({}) // Adding an object as we need more than one ref
const _renderItem = ({ item }) => {
return (
<Item
ref={ref => {
cellRefs.current[item.id] = ref;
}}
{...item}
/>
);
};
....
}

发布您需要更改项目组件的帖子，例如

const Item = React.forwardRef((props, ref) => {
...
const handleClick = () => {};
useImperativeHandle(ref, () => ({
// values that need to accessible by component using ref, Ex
handleClick,
}))
...
})

附言如果 Item 不是功能组件，则可以避免第二步

Answer 2

做类似的事情(来自 react doc(

function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}