如何在reactjs中显示所选项目？

html5 • • 问答

我有一个项目列表（示例名称）。我正在尝试在列表中显示所选项目。.Selected items 有一个selected类，它将为该元素添加一个边框。

.selected {
  border: 1px solid blue;
}

selected Item 用一个变量决定const selectedItem = 1;它1是否会选择seconditem 。如果const selectedItem = 0;它会选择第一个元素。

问题陈述

  1. 我有className="container"宽度的包装 div 200px。它将包含尽可能多的列表元素。这取决于项目宽度。

示例列表项（参见示例 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; 使用相同的数据集
我的输出是这个

但预期的输出是这样的

如果隐藏元素被选中，我们可以向前移动吗？

场景二

  1. 我们还需要注意隐藏元素的宽度。所以选定的项目宽度取决于我将在容器中显示的项目数量。

例如，如果我们通过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>
        {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>
        {visible.map((el, i) => (
          <li className={i === selectedItem ? "selected" : ""} key={i}>
            {el.title}
          </li>
        ))}
      </ul>
      <ul>
        {hidden.map((el, i) => (
          <li className="hide" key={i}>
            {el.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

注意和更新：我不想要可滚动列表。我希望优先考虑“选定”项目，如果空间可用，则在前面添加其他元素。

有什么建议吗？

在 jQuery 中是可能的。所以确定我们是否在反应中实现了这一点。我检查了这个 jQuery 示例选定的项目在最后但它仍然出现在视图中

https://codepen.io/naveennsit/pen/poPJOPM?editors=1010

以上是如何在reactjs中显示所选项目？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>