React条件渲染组件问题：非指定路径下渲染LinkGridLayout

问题分析 #

你当前的代码用map遍历排除数组会导致组件可能被重复渲染，且条件判断逻辑和需求不符，需要调整实现思路。

正确实现方式 #

无需遍历数组，直接用数组的includes方法判断当前路径是否在排除列表中，再做条件渲染：

// 假设exceptPath为组件state属性或直接定义的数组
const exceptPath = ['home', 'person'];
const pathName = 'test';

return (
  <React.Fragment>
    {!exceptPath.includes(pathName) && <LinkGridLayout />}
  </React.Fragment>
);

代码说明 #

• exceptPath.includes(pathName)：判断当前pathName是否属于需要排除的路径
• 前置!取反后，仅当路径不在排除列表时，才会渲染<LinkGridLayout />
• 利用React逻辑与特性：左侧条件为假时，返回false，React会自动忽略该值，不渲染任何内容

替代写法（三元表达式） #

如果更习惯用三元表达式，可改为：

return (
  <React.Fragment>
    {exceptPath.includes(pathName) ? null : <LinkGridLayout />}
  </React.Fragment>
);

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