如何通过标签动态创建组件？实现导入组件的JSX标签动态生成

嘿，我看到你想动态创建JSX标签还得给组件传递多个不同属性，你的思路方向是对的，但有个小细节需要调整——你现在把Tag设成了字符串"DemoComponent"，React会把它当作普通HTML标签处理，而不是你导入的自定义组件。咱们来一步步修正并优化：

第一步：修正动态组件的引用方式 #

React要求自定义组件的变量名必须大写开头（你已经做到了），但不需要把组件名转成字符串，直接用导入的组件本身赋值给Tag即可：

import DemoComponent from './DemoComponent';
class DynamicRendering extends Component {
  assembleResult() {
    const { democomponent, componentProps } = this.props;
    const result = [];
    if (democomponent) {
      // 直接使用导入的组件，无需转成字符串
      const Tag = DemoComponent;
      // 展开传递所有属性
      result.push(<Tag {...componentProps} />);
    }
    return result;
  }
  render() {
    const result = this.assembleResult();
    // 用Fragment包裹更规范
    return <>{result}</>;
  }
}

第二步：传递多属性的调用方式 #

在父组件中调用DynamicRendering时，把需要传给DemoComponent的所有属性打包成一个对象，通过componentProps传递：

<DynamicRendering 
  democomponent={true}
  componentProps={{
    title: "动态组件标题",
    description: "这是传递的描述内容",
    onButtonClick: () => console.log("点击了组件内的按钮"),
    isDisabled: false
  }}
/>

进阶：支持任意动态组件 #

如果以后需要渲染不同的组件，还可以把组件本身作为props传递，让组件更通用：

class DynamicRendering extends Component {
  assembleResult() {
    // 直接接收父组件传来的组件
    const { component: Tag, componentProps } = this.props;
    const result = [];
    if (Tag) {
      result.push(<Tag {...componentProps} />);
    }
    return result;
  }
  render() {
    const result = this.assembleResult();
    return <>{result}</>;
  }
}

// 调用时可以传入任意组件
<DynamicRendering 
  component={DemoComponent}
  componentProps={{ /* 对应组件的属性 */ }}
/>

<DynamicRendering 
  component={AnotherComponent}
  componentProps={{ /* 另一个组件的属性 */ }}
/>

函数组件简化版 #

如果更倾向于函数式写法，代码可以更简洁：

import DemoComponent from './DemoComponent';
function DynamicRendering({ component: Tag, componentProps }) {
  // 存在组件则渲染，否则返回null
  return Tag ? <Tag {...componentProps} /> : null;
}

这样不管你要传递多少属性，都能通过componentProps一次性传给目标组件，非常灵活。如果需要渲染多个动态组件，只需要在assembleResult里循环生成对应的JSX元素就行啦。

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