如何在MUI中映射过渡？解决Grow组件子元素类型错误问题

问题原因 #

你遇到的Warning: Failed prop type: Invalid prop children of type array supplied to ForwardRef(Grow), expect a single ReactElement错误，核心原因是MUI的Grow组件要求子节点必须是单个React元素，但你直接将map返回的元素数组传给了它，数组不符合单个元素的校验规则。

修复方案 #

把map生成的所有Product组件用一个容器组件包裹起来，让Grow的子元素变为单个容器元素，容器内部再承载多个Product组件。推荐使用MUI的Box并设置display: contents，这样不会额外生成冗余DOM节点，也不会破坏原有的Grid布局结构。

修改后的代码示例：

if (enter) {
    return (
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, 250px)",
          gap: "10px",
          alignItems: "center",
          justifyContent: "space-evenly",
          padding: "0 50px",
          height: "100%",
        }}
      >
        {searchState.length ? (
          <>
            <Grow in={true}>
              {/* 用Box包裹所有Product组件，保持布局不变 */}
              <Box sx={{ display: "contents" }}>
                {searchState.map((item) => (
                  <Product key={item.id} productData={item} />
                ))}
              </Box>
            </Grow>
            <Grow
              in={true}
              style={{ transformOrigin: "0 0 0" }}
              {...(true ? { timeout: 1000 } : {})}
            >
              <Box sx={{ display: "contents" }}>
                {searchState.map((item) => (
                  <Product key={item.id} productData={item} />
                ))}
              </Box>
            </Grow>
          </>
        ) : (
          <Box sx={{stylesNone}}>No products found</Box>
        )}
      </Box>
    );
  }

补充说明 #

• 如果不需要严格保持原布局结构，也可以直接使用普通Box或原生div包裹，无需设置display: contents。
• 所有动态生成的列表项必须保留key属性，这是React列表渲染的基本要求，避免额外的性能问题和警告。

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