React中基于isManager状态实现侧边栏列表条件渲染的问题

核心注意点 #

不要直接使用splice处理原links数组，splice是原地修改方法，会污染原数组导致其他依赖该数组的逻辑出错，更推荐使用非原地修改的slice方法实现截取需求。如果必须用splice，需要先拷贝一份原数组再操作。

实现方式（两种可选） #

方式1：直接在JSX表达式内处理（适合逻辑简单的场景）

直接在map调用前通过三元运算对数组做条件处理，修改原代码中map的调用主体即可：

return (
    <div className="flex-item--fill flex--column scops-sidebar-content-container">
      <ul>
        {/* 三元运算先处理要遍历的数组，再执行map渲染 */}
        {(isManager ? links : links.slice(0, links.length - 3)).map((link) => (
          <li
            key={link.id}
            className="pad-half--left"
            style={{
              backgroundColor: `${
                activeTabId === link.id ? '#4065d0' : 'var(--color-primary)'
              }`,
            }}
          >
            <button
              className="btn--plain full-width align--left unpad"
              style={{ color: 'white' }}
              onClick={(e) => tabHandler(e, link.id)}
            >
              {link.name}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );

方式2：提前在return外计算待渲染数组（推荐，可读性更高）

把数组处理逻辑提前放到组件return语句之前，JSX部分只负责渲染，代码更易维护：

// return 之前添加这行逻辑
const renderLinks = isManager ? links : links.slice(0, links.length - 3);

return (
    <div className="flex-item--fill flex--column scops-sidebar-content-container">
      <ul>
        {/* 直接遍历提前处理好的数组即可 */}
        {renderLinks.map((link) => (
          <li
            key={link.id}
            className="pad-half--left"
            style={{
              backgroundColor: `${
                activeTabId === link.id ? '#4065d0' : 'var(--color-primary)'
              }`,
            }}
          >
            <button
              className="btn--plain full-width align--left unpad"
              style={{ color: 'white' }}
              onClick={(e) => tabHandler(e, link.id)}
            >
              {link.name}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );

补充说明 #

如果必须使用splice实现，需要先对原数组做浅拷贝避免修改原数据，写法如下：

// 拷贝数组后再用splice截取，splice第二个参数是截取长度，这里取总长度减3
const renderLinks = isManager ? links : [...links].splice(0, links.length - 3);

内容的提问来源于stack exchange，提问作者fra.mstr