React动态渲染标签始终小写，无法识别组件问题求助

这其实是React的核心识别规则导致的：只有大写开头的变量会被React判定为自定义组件。如果你直接把字符串（哪怕内容是大写的，比如this.props.id返回的"Facebook"）当作标签名使用，React会默认把它当成原生HTML元素处理——而原生HTML标签全是小写的，所以浏览器最终渲染出的就是<facebook>这种无法被识别的标签。

举个反例，如果你之前的render代码是这样写的：

render() {
  return <this.props.id />;
}

React会把this.props.id解析成普通字符串，直接当作原生标签处理，自然会转成小写。

你需要先把字符串形式的组件名映射到实际的组件引用，再用大写开头的变量来渲染它，具体步骤如下：

1. 先创建一个组件映射对象，把组件名称（字符串）和对应的组件引用关联起来：

// 先导入你的各个SVG组件
import Facebook from './Facebook.svg';
import Twitter from './Twitter.svg';
import Instagram from './Instagram.svg';

// 建立组件名到组件的映射
const IconMap = {
  Facebook,
  Twitter,
  Instagram
  // 其他SVG组件依次添加...
};

2. 在render方法中，从映射对象取出对应组件，用大写变量存储后再渲染：

render() {
  // 取出对应组件，变量名必须大写开头，这是React识别自定义组件的关键
  const TargetIcon = IconMap[this.props.id];

  // 可选：如果传入的id不存在对应组件，渲染默认占位或null避免报错
  if (!TargetIcon) {
    return <span>未知图标</span>;
  }

  return <TargetIcon />;
}

这样React就能正确识别TargetIcon是你的自定义SVG组件，最终渲染出的就是<Facebook>这类正确的组件标签，自然就能正常识别并渲染了。

• 要确保IconMap里的键和this.props.id的取值完全匹配（包括大小写），否则会找不到对应组件。
• 如果你的SVG组件是动态加载的，逻辑也是一致的：先拿到组件的实际引用，用大写变量存储后再进行渲染。

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