仅在组件尚未重新渲染时才渲染它

Posted 2023-02-22

【中文标题】仅在组件尚未重新渲染时才渲染它

【英文标题】：Render a component only if it is not already redendered

【发布时间】：2022-01-06 09:20:09

【问题描述】：

假设我有一个像这样的对象，用于在 React 中创建材质导航栏：

const menu = 
   DASHBOARD: [
      
         name: ViewPage1
         type: VIEW
      ,
      
         name: ViewPage2
         type: VIEW
      ,
      
         name: RunPage1
         type: RUN
      ,
      
         name: RunPage2
         type: RUN
      ,
   ],

我的目标是只渲染一次“类型”标签（查看或运行）。所以有这样的东西：

----VIEW
ViewPage1
ViewPage2
----RUN
RunPage1
RunPage2

我试过这样：

 Object.keys(menu).map((key) => (
          <>
            <Button>
              key
            </Button>
            <Menu>
              <div>           
                menu[key].map((menuItem) => (
                  <TypeLabelComponent label=menuItem.type size="small" variant="outlined" />
                  <MenuItem>
                      menuItem.name
                  </MenuItem>
                ))
              </div>
            </Menu>
          </>
        ))

但很明显，它每次在地图中循环时都会渲染 TYPE 标签。所以我的结果如下：

----VIEW
ViewPage1
----VIEW
ViewPage2
----RUN
RunPage1
----RUN
RunPage2

如何处理此问题以仅在尚未呈现 TYPE 标签的情况下呈现它？

【问题讨论】：

按type 分组菜单对象。此外，您在映射项目中缺少 key 道具并为内部 .map() 内容包装 <></>。

【参考方案1】：

首先将仪表板聚合为对象键，因为类型和值是名称数组。

const menu = 
  DASHBOARD: [
    
      name: "ViewPage1",
      type: "VIEW",
    ,
    
      name: "ViewPage2",
      type: "VIEW",
    ,
    
      name: "RunPage1",
      type: "RUN",
    ,
    
      name: "RunPage2",
      type: "RUN",
    ,
  ],
;

const Component = () => 
  const data = menu.DASHBOARD.reduce((acc, curr) => 
    if (!acc[curr.type]) 
      acc[curr.type] = [];
    
    acc[curr.type].push(curr.name);
    return acc;
  , );

  return (
    <div>
      Object.entries(data).map(([type, names]) => 
        return (
          <div key=type>
            <div>`--------$type`</div>
            names.map((name) => (
              <div key=name>name</div>
            ))
          </div>
        );
      )
    </div>
  );
;

ReactDOM.render(<Component />, document.getElementById("app"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="app"></div>