如何根据子元素的数量添加按钮？答案

【问题标题】：How to add a button depending on number of child elements?如何根据子元素的数量添加按钮？
【发布时间】：2020-04-05 02:39:38
【问题描述】：

所以我有一堆跨度包含在一个 div 中。我想要的功能相当简单，但我不确定我将如何执行。

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>

所以可以说我只想显示 3 个跨度。在 3 个跨度之后，将有一个按钮或另一个带有类似“...”的跨度，它是可点击的，然后我可以添加一个 onClick 或悬停事件来显示视图中未包含的隐藏跨度的选择。我将如何实现这一目标？也在 jsx 文件中执行此操作。

【问题讨论】：

您可以简单地根据点击 ... 按钮进行切换

标签： html css reactjs

【解决方案1】：

您应该在渲染之前修改一个数组并创建一个标志来确定列表是否展开（显示所有项目）。这是我的例子

const List = props => {
  const [expanded, setExpanded] = useState(false);
  const { items, limit = 3 } = props;

  const list = items.slice(0, expanded ? items.length : limit);

  return (
    <div>
      {list.map((item, index) => (
        <span key={index}>{item}</span>
      ))}
      <button onClick={()=>setExpanded(prev=>!prev)}>toggle</button>
    </div>
  );
};

和用法

<List items={[1,2,3,4,5,6]} limit={4}/>

【讨论】：

【解决方案2】：

使用show 状态变量来控制您希望在何处显示其余内容，onClick 会将show 设置为 true：

function MyComponent() {
    const [show, setShow] = useState(false)

    return (
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      {
        show 
        ? <>
          <span>4</span>
          <span>5</span> 
        </>
        : <button onClick={() => setShow(!show)}>...</button>
      }
    </div>
  )
}

这是你想要的吗？ https://codesandbox.io/s/blissful-chandrasekhar-77fg3

【讨论】：

是的，但仅当项目数量超过 X 时才显示按钮，否则它应该是不可见的。