如何在React中动态为组件构造并传递所需props

动态为组件表达式传递Props的写法完全可行。你当前代码中直接把组件类作为children传入的写法无法自动注入Props，原因是React只会对JSX中标签形式声明的组件自动挂载Props解析逻辑，裸的组件类引用作为普通静态值时，不会被React识别为可渲染组件节点，需要手动完成Props构造和组件渲染转换。

1. 即时渲染改造（最低成本适配当前场景） #

这是最贴合你现有代码结构的方案，不需要引入额外抽象，只需要在组件渲染时手动将组件类转换为带指定Props的JSX节点：

function Another(props){
  // 必须将动态组件引用赋值给首字母大写的变量，符合JSX组件识别规则
  const DynamicForm = props.data.form;
  // 构造需要透传的Props对象
  const passProps = {
    title: props.data.title
  };

  return (
     <Form title={props.data.title}>
      {/* 以JSX标签形式渲染，批量透传构造好的Props */}
      <DynamicForm {...passProps} />
     </Form>
  );
}

• 注意：不要直接在JSX里写<props.data.form />，这种写法会因为变量名是小写开头的属性访问路径，被React判定为原生HTML标签，直接报错。

2. 通用Props透传组件（适合多场景复用） #

如果后续需要给不同的动态组件注入多套公共Props，可以抽离一层通用的透传组件，避免在每个业务组件里重复写相同的Props拼接逻辑：

// 通用透传组件
function PropsBinder({ component: DynamicComponent, injectProps, ...remainingProps }) {
  return <DynamicComponent {...injectProps} {...remainingProps} />
}

// 在业务组件中调用
function Another(props){
  return (
     <Form title={props.data.title}>
      <PropsBinder
        component={props.data.form}
        injectProps={{ title: props.data.title }}
      />
     </Form>
  );
}

3. HOC高阶组件落地（适合静态配置解耦场景） #

你提到的HOC方案非常适合contents配置提前定义、不需要依赖运行时父组件数据的场景，直接在配置阶段就完成Props和组件的绑定，渲染层完全不需要关心Props传递逻辑：

1. 先定义用于注入固定Props的HOC工厂函数：

const withTitle = (WrappedComponent, fixedTitle) => {
  // 返回包装后的新组件，内部自动把固定title透传给原组件
  return (ownProps) => <WrappedComponent title={fixedTitle} {...ownProps} />
}

2. 在定义组件配置时，用HOC预先包装好需要的组件：

import SomeComponent from 'someForm';

const contents = {
   title: 'hello',
   // 不需要直接传入原组件，传入已经绑定好title值的包装组件
   form: withTitle(SomeComponent, 'hello')
}

3. 这种改造完成后，原来的Another组件代码不需要任何修改，直接将props.data.form作为children传入Form即可正常运行，因为此时传入的form组件本身已经携带了绑定好的title Props引用。

• 仅在当前业务页面需要单次给动态组件注入Props：直接选即时渲染改造方案，无额外封装成本，代码可读性最高。
• 多个业务模块都需要给动态组件批量注入公共Props：使用通用透传组件，减少重复模板代码。
• 组件配置需要和业务渲染逻辑完全解耦、提前静态注册：使用HOC方案，把Props绑定逻辑下沉到配置层，降低渲染层的维护复杂度。

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