React父组件搜索框控制SideBarLink子组件显隐的最优方案咨询

你当前的实现不是最优方案，重复为每个SideBarLink手动声明hidden属性、重复传入text匹配值确实会随链接数量增加大幅提升维护成本。

核心优化思路 #

把侧边栏链接的配置抽离为独立的静态数组，实现数据与渲染逻辑分离，通过遍历数组自动生成所有SideBarLink组件，自动判断隐藏状态，无需手动为每个组件写重复逻辑。

优化后代码示例 #

import "./SideBar.css";
import React, { useState } from "react";
import SideBarDropdown from "./SideBarDropdown";
import SideBarLink from "./SideBarLink";
import { TextInput } from "../Input";

// 抽离侧边栏链接配置，新增链接只需要往这个数组加项即可
const SIDE_BAR_LINKS = [
  {
    to: urls.accounts,
    text: "Account",
    icon: "fas fa-plus-square"
  },
  {
    to: urls.customers,
    text: "Customer",
    icon: "fas fa-plus-square"
  },
  {
    to: urls.orders,
    text: "Order",
    icon: "fas fa-plus-square"
  }
] as const;

const SideBar: React.FC = () => {
  const [searchPhrase, setSearchPhrase] = useState<string>("");

  const acroynym = (str: string) =>
    str
      .split(/\s/)
      .reduce((response, word) => (response += word.slice(0, 1)), "");

  const match = (text: string) => {
    if (!searchPhrase) return true;
    const lowerSearch = searchPhrase.toLowerCase();
    return text.toLowerCase().includes(lowerSearch) || 
           acroynym(text).toLowerCase().includes(lowerSearch);
  };

  return (
    <nav id="sidebar" className="custom_scrollbar">
      <ul className="list-unstyled components">
        <TextInput
          value={searchPhrase}
          onChange={(value: string) => setSearchPhrase(value!)}
        />
        {/* 遍历配置生成组件，自动处理隐藏逻辑 */}
        {SIDE_BAR_LINKS.map(link => (
          <SideBarLink
            key={link.to}
            to={link.to}
            text={link.text}
            icon={link.icon}
            hidden={!match(link.text)}
          />
        ))}
      </ul>
    </nav>
  );
};

export default SideBar;

额外优化点 #

• 把searchPhrase的初始值设为空字符串而非undefined，避免后续多次可选链判断，逻辑更简洁
• 提前把搜索词转小写存为变量，避免重复调用toLowerCase()方法，提升小幅度性能
• 如果你可以修改SideBarLink组件的内部实现，还可以把搜索匹配逻辑进一步下沉到子组件，只需要把searchPhrase通过props或者context传递给SideBarLink，由组件内部判断是否隐藏，父组件不需要再处理hidden属性的赋值逻辑，更适合侧边栏层级深、有嵌套下拉菜单的场景

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