[英]Generate multiple refs in map loop
如果我使用useRef([]);
我仍然感到困惑正確的方法,因為itemsRef
返回Object {current: Array[0]}
。 在這里行動: https://codesandbox.io/s/zealous-platform-95qim?file=/src/App.js:0-1157
import React, { useRef } from "react";
import "./styles.css";
export default function App() {
const items = [
{
id: "asdf2",
city: "Berlin",
condition: [
{
id: "AF8Qgpj",
weather: "Sun",
activity: "Outside"
}
]
},
{
id: "zfsfj",
city: "London",
condition: [
{
id: "zR8Qgpj",
weather: "Rain",
activity: "Inside"
}
]
}
];
const itemsRef = useRef([]);
// Object {current: Array[0]}
// Why? Isn't it supposed to be filled with my refs (condition.id)
console.log(itemsRef);
return (
<>
{items.map(cities => (
<div key={cities.id}>
<b>{cities.city}</b>
<br />
{cities.condition.map(condition => (
<div
key={condition.id}
ref={el => (itemsRef.current[condition.id] = el)}
>
Weather: {condition.weather}
<br />
Activity: {condition.activity}
</div>
))}
<br />
<br />
</div>
))}
</>
);
}
在原始示例中,當我console.log(itemsRef);
時收到// Object {current: Array[3]}
不同之處在於我在我的版本itemsRef.current[condition.id]
中使用它作為嵌套的 map 循環,因此i
不起作用。
import React, { useRef } from "react";
import "./styles.css";
export default function App() {
const items = ["sun", "flower", "house"];
const itemsRef = useRef([]);
// Object {current: Array[3]}
console.log(itemsRef);
return items.map((item, i) => (
<div key={i} ref={el => (itemsRef.current[i] = el)}>
{item}
</div>
));
}
在將refs
添加到itemRefs
時,您使用的是非數字字符串鍵,這意味着它們最終成為數組 object 的屬性,但不是數組元素,因此它的長度保持0
。 根據您的控制台,它可能會或可能不會在數組 object 上顯示非元素屬性。
您可以使用map
中的index
將它們設為數組元素(但請繼續閱讀:):
{cities.condition.map((condition, index) => (
<div
key={condition.id}
ref={el => (itemsRef.current[index] = el)}
>
Weather: {condition.weather}
<br />
Activity: {condition.activity}
</div>
))}
但是根據您對這些參考的處理方式,我會避免這種情況,而是將每個condition
作為其自己的組件:
const Condition = ({weather, activity}) => {
const itemRef = useRef(null);
return (
<div
ref={itemRef}
>
Weather: {weather}
<br />
Activity: {activity}
</div>
);
};
然后擺脫itemRefs
並執行以下操作:
{cities.condition.map(({id, weather, activity}) => (
<Condition key={id} weather={weather} activity={activity} />
))}
即使我們使用數組元素,您當前方式的一個問題是itemRefs
將繼續在其中包含三個元素,即使它們過去引用的 DOM 元素已經消失(它們將具有null
代替),因為 React 調用您的ref
刪除元素時使用null
回調,並且您的代碼只是將該null
存儲在數組中。
或者,您可以使用 object:
const itemRefs = useRef({});
// ...
{cities.condition.map(condition => (
<div
key={condition.id}
ref={el => {
if (el) {
itemsRef.current[condition.id] = el;
} else {
delete itemsRef.current[condition.id];
}
}}
>
Weather: {condition.weather}
<br />
Activity: {condition.activity}
</div>
))}
或者也許是Map
:
const itemRefs = useRef(new Map());
// ...
{cities.condition.map(condition => (
<div
key={condition.id}
ref={el => {
if (el) {
itemsRef.current.set(condition.id, el);
} else {
itemsRef.current.delete(condition.id);
}
}}
>
Weather: {condition.weather}
<br />
Activity: {condition.activity}
</div>
))}
但同樣,我傾向於制作一個Condition
組件來管理它自己的 ref。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.