在下一个 js 中将变量从 Layout 传递给子级

Question

我有以下代码`

import { useState, useEffect } from 'react'
import LayoutContent from './layout_content';
type Props = {
  children: JSX.Element | JSX.Element[]
}
const Layout = ({ children }: Props) => {
  const [selected, setSelected] = useState(countries[0]);
  const country= selected.id
  return (
    <>
      <Sidebar onClick={toggle} sidebar={open} />
     <LayoutContent sidebar={open} countriesWithsrc ={countriesWithsrc}  selected={selected} lected={setSelected} >
      {children}
     </LayoutContent>
    </>
  )
}
export default Layout;

` 如何在没有状态管理的情况下将 Layout 组件中的变量国家/地区传递给子级？即我想钻取它。

Answer 1

如果您不想要任何状态管理，您可以使用

React.Children

。它提供了与

children

道具一起使用的实用程序。

React.Children.map

将为组件的每个直接子级运行一个方法。您可以使用

cloneElement

通过传递额外的属性来创建元素的克隆。事实上，你甚至可以修改你正在克隆的元素的子元素，但这不是这里的问题。

请注意，上下文将是更好的方法。

const Layout = ({ children }: Props) => {
....
....
const modifiedChildren = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { testProp : 'test' });
    }
    return child;
  });
....
....

return (
    <>
      <Sidebar onClick={toggle} sidebar={open} />
     <LayoutContent sidebar={open} countriesWithsrc ={countriesWithsrc}  selected={selected} lected={setSelected} >
      {modifiedChildren}
     </LayoutContent>
    </>
  )
}

Answer 2

一个重要的细节是，如果子页面在服务器端呈现，我们在道具中有 searchParams 和参数（至少直到当前版本的 NextJs 13.2）...例如：

const Page = async ({searchParams, params}: {
    searchParams: { [key: string]: string | string[] | undefined },
    params: {language: string} 
}) => { 
 console.log('current locale:', params.language);
 console.log('your query param:', searchParams['yourParam'])

....

}

好看！