React中能否为JSX元素数组的每个组件传递props？

你当前的写法无法直接给数组里的JSX元素添加新props，因为SECTIONS里存储的是已经实例化好的React元素（比如<Intro/>本质是React.createElement的返回值，props已经固定）。不过只要调整数组的存储方式，就能实现给每个组件传递handler作为props的需求，下面是两种常用方案：

方案1：存储组件本身而非实例化JSX #

把SECTIONS改成组件类/函数的数组，而不是已渲染的JSX元素，这样在map的时候再动态传入props：

import Intro from '../Introduction/Intro';
import Skills from '../Skills/Skills';

// 存储组件本身，不是<Intro/>这种实例化元素
export const SECTIONS = [Intro, Skills];

const SomeComponent = () => {
  const handler = () => { /* 你的逻辑 */ };
  return (
    <div className={classes.container}>
      <div className={classes.fields}>
        {SECTIONS.map((Section, index) => {
          // 注意组件变量名要大写（React规范），这里传入foo={handler}
          return <Section key={index} foo={handler} />;
        })}
      </div>
      <div className={classes.check}>...</div>
    </div>
  );
};

方案2：用配置数组保留默认props（可选） #

如果需要给不同组件设置不同的默认props，或者要更清晰地管理组件配置，可以把SECTIONS定义为包含组件和默认props的对象数组：

export const SECTIONS = [
  { component: Intro, defaultProps: { title: '自我介绍' } },
  { component: Skills, defaultProps: { category: '技术栈' } }
];

const SomeComponent = () => {
  const handler = () => { /* 你的逻辑 */ };
  return (
    <div className={classes.container}>
      <div className={classes.fields}>
        {SECTIONS.map(({ component: Section, defaultProps }, index) => {
          // 合并默认props和新传入的handler
          return <Section key={index} {...defaultProps} foo={handler} />;
        })}
      </div>
      <div className={classes.check}>...</div>
    </div>
  );
};

补充说明 #

• 关于key：尽量避免用数组索引作为key（如果组件顺序会变化，可能引发渲染问题），如果每个组件有唯一标识（比如id），用标识作为key更稳妥。
• React元素的本质：<Intro/>是React.createElement(Intro, {})的语法糖，生成的对象里props是不可变的，所以不能事后修改，必须在创建元素时传入需要的props。

内容的提问来源于stack exchange，提问作者Roni Jack Vituli