如何在react js中显示所选项目？
use*_*656 5 javascript reactjs
我有一个项目列表（示例名称）。我正在尝试在列表中显示所选项目。.Selected items 有一个selected类，它将为该元素添加一个边框。
.selected {
border: 1px solid blue;
}
selected Item 用一个变量决定const selectedItem = 1;它1是否会选择seconditem 。如果const selectedItem = 0;它会选择第一个元素。
问题陈述
- 我有
className="container"宽度的包装 div200px。它将包含尽可能多的列表元素。这取决于项目宽度。
示例列表项（参见示例 1 它只显示三个项，因为所有文本都很小。）
const data = [
{ title: "xahsdha" },
{ title: "hello" },
{ title: "hessllo" },
{ title: "hesslssslo" },
{ title: "navveiii" }
];
带有新数据的示例 2：请参阅项目第一个文本很大。它只显示一项。
const data = [
{ title: "xahsdhaadasdasdasdass" },
{ title: "hello" },
{ title: "hessllo" },
{ title: "hesslssslo" },
{ title: "navveiii" }
];
问题：
我无法选择容器外的项目。
给定数据示例
const data = [
{ title: "xahsdh" },
{ title: "hello" },
{ title: "hessllo" },
{ title: "hesslssslo" },
{ title: "navveiii" }
];
如果我给const selectedItem = 1;
我的输出和预期输出是一样的。看到我能够显示选定的项目
但如果我给const selectedItem = 3; 使用相同的数据集 我的输出是这个
但预期的输出是这样的
如果隐藏元素被选中，我们可以向前移动吗？
场景二
- 我们还需要注意隐藏元素的宽度。所以选定的项目宽度取决于我将在容器中显示的项目数量。
例如，如果我们通过const selectedItem = 3；有了这个数据集
const data = [
{ title: "xahsdh" },
{ title: "hello" },
{ title: "hessllo" },
{ title: "hesslsssloasdasdasdasdasdsa" },
{ title: "navveiii" }
];
预期的输出是这样的
这个功能可行吗？
这是我的代码 https://codesandbox.io/s/unruffled-hellman-hswdl?file=/src/App.js
import "./styles.css";
import React, { createRef, useMemo, useRef } from "react";
const data = [
{ title: "xahsdh" },
{ title: "hello" },
{ title: "hessllo" },
{ title: "hesslssslo" },
{ title: "navveiii" }
];
const selectedItem = 1;
export default function App() {
const arrLength = data.length;
const [defaultState, setDefaultState] = React.useState(true);
const elRefs = useMemo(
() => Array.from({ length: data.length }).map(() => createRef()),
[]
);
const [state, setState] = React.useState({
total: 0,
tabWidth: 0,
dimension: {}
});
const ulRef = useRef(null);
React.useEffect(() => {
setDimention();
}, []);
const setDimention = () => {
let total = ulRef.current.offsetWidth,
dimension = {},
tabWidth = 0;
console.log(total);
elRefs.forEach((item, i) => {
dimension[i] = item.current?.offsetWidth || 0;
tabWidth += item.current?.offsetWidth || 0;
});
console.log({
total,
dimension,
tabWidth
});
setDefaultState(false);
setState({
total,
dimension,
tabWidth
});
};
const getTabs = () => {
const { tabWidth, dimension, total } = state;
var visible = [],
avaiable = total,
hidden = [];
if (defaultState) {
return {
visible,
hidden
};
}
data.forEach((element, index) => {
if (avaiable - dimension[index] > 0) {
visible.push(element);
avaiable = avaiable - dimension[index];
} else {
hidden.push(element);
}
});
return {
visible,
hidden
};
};
const { visible = [], hidden = [] } = getTabs();
return (
<div className="container" ref={ulRef}>
<ul id="dummy">
{visible.length === 0 &&
hidden.length === 0 &&
data.map((el, i) => (
<li
className={i === selectedItem ? "selected" : ""}
ref={elRefs[i]}
key={i}
>
{el.title}
</li>
))}
</ul>
<ul id="visible">
{visible.map((el, i) => (
<li className={i === selectedItem ? "selected" : ""} key={i}>
{el.title}
</li>
))}
</ul>
<ul id="hidden">
{hidden.map((el, i) => (
<li className="hide" key={i}>
{el.title}
</li>
))}
</ul>
</div>
);
}
注意和更新：我不想要可滚动列表。我希望优先考虑“选定”项目，如果空间可用，则在前面添加其他元素。
有什么建议吗？
在 jQuery 中是可能的。所以确定我们是否在反应中实现了这一点。我检查了这个 jQuery 示例选定的项目在最后但它仍然出现在视图中
我认为这里的主要问题是弄清楚在不从一开始渲染时应该显示哪些元素。
我建议从当前选定的项目开始计算可见和隐藏元素的数组，以及可见的偏移量。首先反向计算向数组前端移动的可见/隐藏元素，然后从所选项目向数组末尾移动之后的元素开始执行第二次循环。
const getTabs = () => {
const { dimension, total } = state;
const visible = [];
const hidden = [];
let offset = 0;
let available = total;
if (!initialRender) {
// check forward
for (let i = selectedItem; i >= 0; i--) {
if (available > dimension[i]) {
visible.unshift(data[i]);
available -= dimension[i];
} else {
hidden.unshift(data[i]);
offset++;
}
}
// check aft
for (let i = selectedItem + 1; i < arrLength; i++) {
if (available > dimension[i]) {
visible.push(data[i]);
available -= dimension[i];
} else {
hidden.push(data[i]);
}
}
}
return {
hidden,
offset,
visible
};
};
渲染可见数组和隐藏数组时，只需将当前映射索引+偏移量与当前选定项索引进行比较即可。
<ul id="visible">
{visible.map((el, i) => (
<li
className={i + offset === selectedItem ? "selected" : ""}
key={i}
>
{el.title}
</li>
))}
</ul>
<ul id="hidden">
{hidden.map((el, i) => (
<li className="hide" key={i}>
{el.title}
</li>
))}
</ul>
编辑
由于这个想法是在可见区域中包含当前选定的项目，然后只有数组中从数组开头开始仍然适合且可见的那些元素，因此我们可以修改上面的解决方案来代替做出假设当前选定的项目将始终适合。
首先从可用性中减去所选项目的大小，然后从数组的开头进行迭代。如果当前索引与当前选定的索引不匹配，则将当前元素推入可见数组，如果适合则从可用性中减去。如果当前正在查看所选项目，请将其推入可见数组中。
对于此算法和渲染，我向每个项目添加了一个 GUID。
const data = [
{ title: "xahsdh", id: uuidV4() },
{ title: "hello", id: uuidV4() },
{ title: "hessllo", id: uuidV4() },
{ title: "hesslssslo", id: uuidV4() },
{ title: "navveiii", id: uuidV4() },
];
...
const getTabs = () => {
const { dimension, total } = state;
const visible = [];
const hidden = [];
const selectedIndex = data.findIndex((el) => el.id === selectedItem);
if (!initialRender && selectedIndex !== -1) {
let available = total - dimension[selectedIndex];
data.forEach((el, i) => {
if (i === selectedIndex) {
visible.push(el);
return;
}
if (available > dimension[i]) {
visible.push(el);
available -= dimension[i];
} else {
hidden.push(el);
}
});
}
return {
hidden,
visible
};
};
渲染时检查 GUID。
<ul id="visible">
{visible.map((el, i) => (
<li
className={el.id === selectedItem ? "selected" : ""}
key={el.id}
>
{el.title}
</li>
))}
</ul>
<ul id="hidden">
{hidden.map((el, i) => (
<li className="hide" key={el.id}>
{el.title}
</li>
))}
</ul>