Next.js：无需状态管理，如何将Layout的country变量传递给子组件？

要实现这个需求，核心是给Layout的子元素注入country属性——因为你传入的children是已经创建好的JSX元素，直接修改props需要用React.cloneElement方法克隆元素并添加新属性。以下是具体实现方案：

步骤1：修改Layout组件的子元素渲染逻辑 #

在Layout组件中，把直接渲染{children}的部分替换为克隆元素并注入country属性的代码，同时兼容单个/多个子组件的情况：

import { useState, cloneElement } 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;

  // 给子组件注入country属性
  const childrenWithCountry = Array.isArray(children)
    ? children.map(child => cloneElement(child, { country }))
    : cloneElement(children, { country });

  return (
    <>
      <Sidebar onClick={toggle} sidebar={open} />
      <LayoutContent 
        sidebar={open} 
        countriesWithsrc={countriesWithsrc}  
        selected={selected} 
        setSelected={setSelected} // 修正原代码笔误：将lected改为setSelected
      >
        {childrenWithCountry}
      </LayoutContent>
    </>
  )
}
export default Layout;

步骤2：子组件接收country属性 #

在Layout的子组件中，需要在Props类型中声明country参数，之后直接使用即可：

// 示例子组件代码
type ChildProps = {
  country: string; // 根据你的country实际类型调整，比如number、自定义类型等
  // 子组件的其他属性
};

const ChildComponent = ({ country, ...rest }: ChildProps) => {
  return <div>当前选中的国家ID：{country}</div>;
};

步骤3：正常使用Layout组件 #

调用Layout时无需额外操作，子组件会自动接收到country属性：

<Layout>
  <ChildComponent />
  {/* 多个子组件也可直接传入 */}
  <AnotherChildComponent />
</Layout>

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