React组件渲染失败求助：无法正常渲染自定义组件

看起来你的问题出在组件命名规则上！React要求自定义组件的名称必须以大写字母开头，如果用小写开头，React会把它当成原生HTML标签来解析，自然就渲染不出你写的自定义组件了。

问题分析 #

你在父组件里写的调用代码：

<Col md={{ span: 16, offset: 4 }} xs={{ span: 20, offset: 2 }}>
  {props.language === "en" ? <englishReport /> : <danishReport />}
</Col>

这里的<englishReport />和<danishReport />都是小写开头，完全不符合React的组件命名规范，这就是渲染失败的核心原因。

另外看你的danishReport组件代码，导出的类名是indexDanish，你在父组件导入的时候，也要确保导入的名称是大写开头的，避免和调用时的名称混淆。

修复后的代码 #

1. 修正父组件里的组件调用（改成大写开头）：

<Col md={{ span: 16, offset: 4 }} xs={{ span: 20, offset: 2 }}>
  {props.language === "en" ? <EnglishReport /> : <DanishReport />}
</Col>

2. 同步修正父组件的导入语句（保持大写开头）：

// 替换成你的实际文件路径
import EnglishReport from './englishReport';
import DanishReport from './danishReport';

3. 建议子组件的类名和导出名称保持一致（虽非强制，但能避免混淆），比如修改danishReport组件：

import React, { Component } from 'react';

class DanishReport extends Component {
  render() {
    return (
      <div style={{ color: "#fff", textAlign: "left" }}>
        <b>hej</b>
      </div>
    );
  }
}

export default DanishReport;

这样修改后，你的组件应该就能正常根据语言切换渲染了！

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