如何程序化向React组件传递Props？能否给已有组件动态添加Prop？

当然可以！你完全不用非得创建新类来给GenericComp添加content prop，这里有几种更简洁的程序化实现方式，根据你的场景选择即可：

• 高阶组件（HOC）：适合复用增强逻辑
  高阶组件是React中用于组件增强的经典模式，本质是一个接收组件和配置、返回新组件的函数。你可以写一个通用的HOC来注入content prop：

  import { GenericComp } from './GenericComp';
  
  // 定义HOC
  const withInjectedContent = (TargetComponent, content) => {
    // 返回新组件，合并原有props和注入的content
    return (props) => <TargetComponent {...props} content={content} />;
  };
  
  // 使用HOC生成新组件
  const NewComp = withInjectedContent(GenericComp, myContent);
  

  这种方式的好处是可以复用注入逻辑，给其他组件也添加类似的props。

• 函数式包装组件：最简单的一次性包装
  如果你不需要复用逻辑，只是想快速包装GenericComp，用箭头函数写个轻量的函数组件就行，比类组件简洁太多：

  import { GenericComp } from './GenericComp';
  
  const NewComp = (props) => <GenericComp {...props} content={myContent} />;
  

  这里保留了...props，后续给NewComp传其他props时，也能透传给GenericComp，灵活性更强。

• React.cloneElement：动态修改已渲染组件的Props
  如果你已经有一个GenericComp的元素实例，想要在渲染时动态添加或修改props，可以用React.cloneElement：

  import React from 'react';
  import { GenericComp } from './GenericComp';
  
  function ParentComponent() {
    const baseElement = <GenericComp />;
    // 克隆元素并添加content prop
    return React.cloneElement(baseElement, { content: myContent });
  }
  

  这个方法适合动态场景，比如处理父组件中的子组件元素时使用。

• 默认Props：全局设置默认值
  如果content是GenericComp的通用默认值，你可以直接给组件设置defaultProps：

  import { GenericComp } from './GenericComp';
  
  // 设置默认props
  GenericComp.defaultProps = {
    content: myContent
  };
  

  注意：这个设置是全局的，所有使用GenericComp的地方如果没传content，都会用这个默认值，要确认符合你的全局需求。

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