diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx index fc3d39e5b7..a7ed36d8da 100644 --- a/src/layout/Layout.tsx +++ b/src/layout/Layout.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useMemo } from 'react'; import classNames from 'classnames'; import useConfig from '../hooks/useConfig'; import { StyledProps } from '../common'; @@ -63,23 +63,25 @@ const Layout: React.FC & { Aside: typeof Aside; } = (props) => { const { direction, className, style, children, ...otherLayoutProps } = props; - const [asides, setAsides] = useState([]); - useEffect(() => { - React.Children.forEach(children, (child: React.ReactChild) => { + + const shouldAsides = useMemo(() => { + const asides: React.ReactElement[] = []; + React.Children.forEach(children, (child: React.ReactElement) => { if (!child || typeof child !== 'object') { return; } if (child.type === Aside) { - setAsides([child]); + asides.push(child); } }); + return !!asides.length; }, [children]); const { classPrefix } = useConfig(); const layoutClassNames = classNames( `${classPrefix}-layout`, { - [`${classPrefix}-layout--with-sider`]: !!asides.length, + [`${classPrefix}-layout--with-sider`]: shouldAsides, [`${classPrefix}-layout__direction-${direction}`]: direction, }, className, diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 6d21b14474..3f85c1c610 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -303809,11 +303809,11 @@ exports[`ssr snapshot test > ssr test src/input-number/_example/status.jsx 1`] = exports[`ssr snapshot test > ssr test src/input-number/_example/step.jsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/layout/_example/aside.jsx 1`] = `"

侧边导航布局

Content
Copyright @ 2019-2020 Tencent. All Rights Reserved
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/aside.jsx 1`] = `"

侧边导航布局

Content
Copyright @ 2019-2020 Tencent. All Rights Reserved
"`; -exports[`ssr snapshot test > ssr test src/layout/_example/base.jsx 1`] = `"

顶部导航布局

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

侧边导航布局

Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

组合导航布局

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/base.jsx 1`] = `"

顶部导航布局

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

侧边导航布局

Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

组合导航布局

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved
"`; -exports[`ssr snapshot test > ssr test src/layout/_example/combine.jsx 1`] = `"
\\"logo\\"/
  • 已选内容
  • 菜单内容一
  • 菜单内容二
  • 菜单内容三
Content
Copyright @ 2019-2020 Tencent. All Rights Reserved
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/combine.jsx 1`] = `"
\\"logo\\"/
  • 已选内容
  • 菜单内容一
  • 菜单内容二
  • 菜单内容三
Content
Copyright @ 2019-2020 Tencent. All Rights Reserved
"`; exports[`ssr snapshot test > ssr test src/layout/_example/top.jsx 1`] = `"
\\"logo\\"/
  • 已选内容
  • 菜单内容一
  • 菜单内容二
  • 菜单内容三
Content
Copyright @ 2019-2020 Tencent. All Rights Reserved
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 5f22005ef4..142f68a344 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -546,11 +546,11 @@ exports[`ssr snapshot test > ssr test src/input-number/_example/status.jsx 1`] = exports[`ssr snapshot test > ssr test src/input-number/_example/step.jsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/layout/_example/aside.jsx 1`] = `"

侧边导航布局

Content
Copyright @ 2019-2020 Tencent. All Rights Reserved
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/aside.jsx 1`] = `"

侧边导航布局

Content
Copyright @ 2019-2020 Tencent. All Rights Reserved
"`; -exports[`ssr snapshot test > ssr test src/layout/_example/base.jsx 1`] = `"

顶部导航布局

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

侧边导航布局

Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

组合导航布局

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/base.jsx 1`] = `"

顶部导航布局

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

侧边导航布局

Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

组合导航布局

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved

Header
Content
Copyright @ 2019-2021 Tencent. All Rights Reserved
"`; -exports[`ssr snapshot test > ssr test src/layout/_example/combine.jsx 1`] = `"
\\"logo\\"/
  • 已选内容
  • 菜单内容一
  • 菜单内容二
  • 菜单内容三
Content
Copyright @ 2019-2020 Tencent. All Rights Reserved
"`; +exports[`ssr snapshot test > ssr test src/layout/_example/combine.jsx 1`] = `"
\\"logo\\"/
  • 已选内容
  • 菜单内容一
  • 菜单内容二
  • 菜单内容三
Content
Copyright @ 2019-2020 Tencent. All Rights Reserved
"`; exports[`ssr snapshot test > ssr test src/layout/_example/top.jsx 1`] = `"
\\"logo\\"/
  • 已选内容
  • 菜单内容一
  • 菜单内容二
  • 菜单内容三
Content
"`;