React开发：列表项不足5个时如何在渲染阶段自动隐藏展开按钮

核心问题是当前按钮显示逻辑判断的是visible状态值，该值默认是5，所以哪怕过敏项总长度小于5，初始渲染时还是会满足visible >=4的条件显示按钮，调整逻辑如下：

修改后完整代码 #

import { useState } from 'react';

// 组件内逻辑
const [visible, setVisible] = useState(5);
// 修正驼峰命名规范
const [expanded, setExpanded] = useState(false);

const showMore = () => {
  if (visible === 5) {
    setVisible(ProductDetail.allergies.length);
    setExpanded(true);
  } else {
    setVisible(5);
    setExpanded(false);
  } 
}

return (
  <>
    {ProductDetail && ProductDetail.allergies?.length ? (
      <>
        {/* 过敏项列表 */}
        <ul>
          {ProductDetail.allergies.slice(0, visible).map(All => (
            <li key={All.id}> 
              {All.displayText} 
            </li>
          ))}
        </ul>
        {/* 按钮移到map外部，避免重复渲染 */}
        <ButtonBox>
          {/* 直接判断过敏项总长度是否大于5，小于等于5直接不渲染按钮 */}
          {ProductDetail.allergies.length > 5 ? (
            <button type="button" onClick={showMore}>
              {expanded 
                ? (<div><span>close</span><img src={Vector190} alt="收起"/></div>) 
                : (<div><span>more</span><img src={Vector189} alt="展开"/></div>)
              }  
            </button>
          ) : null}
        </ButtonBox>
      </>
    ) : null}
  </>
)

主要改动点 #

• 按钮显示条件替换：将原本的visible >=4改为ProductDetail.allergies.length > 5，直接通过过敏项总条数判断是否需要展示展开/收起按钮，初始化渲染时就生效，无需用户点击触发隐藏
• 修正JSX结构错误：将组件从map遍历逻辑中移出，避免每条过敏项都重复渲染按钮
• 修正命名规范：将setexpanded调整为符合React驼峰命名规范的setExpanded
• 补充img标签alt属性，符合 accessibility 规范

内容的提问来源于stack exchange，提问作者ssksksks