如何在React中为组件数组/路由数组批量传递相同Props？

可以通过**数组映射（map）**结合React的Props传递语法实现，核心是遍历组件列表时统一为每个组件添加公共Props，有两种常见场景：

场景1：组件列表存组件类型而非JSX元素 #

// 定义组件配置列表
const componentConfig = [
  { Component: Home, key: 'home' },
  { Component: Section, key: 'section' }
];

// 统一要传递的公共Props
const sharedProps = { myProp: 'test', commonData: 'shared-value' };

const App = () => {
  return (
    <div>
      {componentConfig.map(item => (
        <item.Component key={item.key} {...sharedProps} />
      ))}
    </div>
  );
};

场景2：组件列表已预定义为JSX元素 #

如果列表里是已经渲染好的JSX（比如<Home />），可以用React.cloneElement克隆元素并追加Props：

const componentList = [
  <Home key="home" />,
  <Section key="section" />
];

const sharedProps = { myProp: 'test' };

const App = () => {
  return (
    <div>
      {componentList.map(element => 
        React.cloneElement(element, sharedProps)
      )}
    </div>
  );
};

针对你给出的路由数组场景，推荐两种实用方案：

方案1：用React.cloneElement处理预定义的路由JSX元素 #

如果路由列表已经在外部文件定义好element字段（比如<Home />），可以在map循环时克隆元素并追加公共Props：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Section from './Section';

// 假设路由列表来自外部文件
const routeList = [
  { path: 'home', element: <Home />, key: 'home' },
  { path: 'section', element: <Section />, key: 'section' }
];

const App = () => {
  // 批量传递的公共Props
  const sharedRouteProps = { myProp: 'test', authToken: 'xxx' };

  return (
    <BrowserRouter>
      <Routes>
        {routeList.map(route => (
          <Route
            key={route.key}
            path={route.path}
            // 克隆原element并追加公共Props
            element={React.cloneElement(route.element, sharedRouteProps)}
          />
        ))}
      </Routes>
    </BrowserRouter>
  );
};

方案2：路由列表存组件类型，统一渲染时传Props #

如果路由列表还未生成JSX元素，直接存储组件类/函数，在map时统一传递公共Props，这种方式更灵活：

// 外部文件的路由配置示例
export const routeList = [
  { path: 'home', Component: Home, key: 'home' },
  { path: 'section', Component: Section, key: 'section' }
];

// 主组件中使用
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { routeList } from './routeConfig';

const App = () => {
  const sharedProps = { myProp: 'test' };

  return (
    <BrowserRouter>
      <Routes>
        {routeList.map(route => (
          <Route
            key={route.key}
            path={route.path}
            element={<route.Component {...sharedProps} />}
          />
        ))}
      </Routes>
    </BrowserRouter>
  );
};

补充说明 #

如果公共Props是动态值（比如从状态、上下文获取），两种方案都适用，只需将sharedProps替换为动态生成的值即可。

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