【发布时间】：2021-07-06 02:57:11
【问题描述】：
我有一个项目列表（示例名称）。我正在尝试在列表中显示所选项目。
.Selected 项目有一个selected 类，它将为该元素添加一个边框。
.selected {
border: 1px solid blue;
}
选择的项目用变量const selectedItem = 1;决定，如果1，它将选择second项目。如果const selectedItem = 0;，它将选择第一个元素。
问题与陈述
- 我有包装器 div
className="container"，其宽度为200px。它将包含尽可能多的列表元素。这取决于项目宽度。
示例 list Item（参见示例 1，它仅显示三个 Item，因为所有文本都很小。）
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; 相同的数据集 我的输出是这样的
如果隐藏元素被选中，我们可以向前移动它吗？
场景 2
- 我们还需要注意隐藏元素的宽度。所以选定的项目宽度取决于我将在容器中显示多少项目。
例如如果我们通过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 中是可能的。所以确定我们是否在 react 中实现了这一点。我检查了这个 jQuery 示例选择的项目在最后，但它仍然在视图中
【问题讨论】：
-
也许你可以让 div 水平滚动，然后以编程方式滚动到被选中的元素
-
@RishabhGupta 我不想滚动列表..举个例子，如果
selectedIndex=4.it 将显示元素 3（具有多个排列 elem 1 + elm 2 ）或元素 3（elem 1）
标签： javascript reactjs