React中如何向对象内存储的JSX组件传递Props

该方案不需要修改subMenus对象里的JSX定义写法，仅需微调渲染行代码，不需要把对象值改为组件函数，符合核心约束要求。

实现逻辑 #

你在subMenus中存储的<XXX />本质是已经创建完成的React Element对象，cloneElement是React提供的原生API，可以克隆已有的Element，同时追加、覆盖自定义props，不会修改原始Element对象。

代码示例 #

subMenus的定义完全保持原样，不需要做任何修改：

const subMenus = {
  "Browse Listings": <MenuSubBrowse />,
  "ShowCase": <MenuShowCase />,
  "Something Else" : <DummyComponent/>
};

只需要把原来渲染位置的{subMenus[n.name]}替换为如下写法即可，需要动态传入的text等所有props都可以在这里定义：

// 记得先在文件头部导入：import { cloneElement } from 'react'
{cloneElement(subMenus[n.name], {
  text: "你需要传入的动态文本值"
  // 其他要传的props直接在这里追加即可，比如onClick、className、自定义事件等
})}

特性说明 #

• 原有Element上已经写好的props，会和新传入的props自动合并，同名props会以新传入的值为准
• 不需要修改subMenus的对象结构，不需要把值改成函数形式
• 支持动态传值，渲染时可以根据上下文传入任意需要的props

如果你要求连渲染行的{subMenus[n.name]}写法都完全不能改动，可以用Context做跨层级传值，不需要改动任何现有对象定义和渲染写法。

实现逻辑 #

在父组件创建Context存储需要传给子菜单的props，子组件直接从Context中取值即可，不需要显式通过JSX属性传递。

代码示例 #

1. 先创建菜单专属的Context：

import { createContext, useContext } from 'react';
const MenuPropsContext = createContext({});
// 封装自定义hook方便子组件取值
const useMenuProps = () => useContext(MenuPropsContext);

2. 修改子组件，从Context中取需要的props，原有props接收逻辑可以保留做兼容：

const DummyComponent = ({ text: propsText }) => {
  const { text: contextText } = useMenuProps();
  // 优先取显式传入的props，没有的话取Context里的值
  const finalText = propsText ?? contextText;
  return <>I am a placeholder component from {finalText}</>;
};
// 其他子组件比如MenuSubBrowse、MenuShowCase需要props的话也按同样方式取值即可

3. 渲染的时候，用Context.Provider包裹菜单渲染区域，传入要下发的props即可，原来的{subMenus[n.name]}写法完全不用动：

<MenuPropsContext.Provider value={{ text: "你要传入的动态文本值" }}>
  {/* 其他菜单相关代码 */}
  {subMenus[n.name]}
  {/* 其他菜单相关代码 */}
</MenuPropsContext.Provider>

特性说明 #

• 完全不需要修改subMenus对象的定义，也不需要修改原来的内联渲染写法
• 适合批量给所有子菜单传统一props的场景
• 如果不同菜单项需要传不同的props，只需要对应不同菜单的渲染位置调整Provider的value值即可

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