javascript - 无法在 react 中呈现组件

Question

我尝试渲染一个简单的组件，但似乎无法让它工作。

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

这就是<englishReport/>组件和 <danishReport/>看起来像

import React, { Component } from 'react';

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

export default indexDanish;

我已经在父组件中导入了这两个组件

Answer 1

自定义组件名称需要以大写字母开头，or Babel will treat that as a string .

将 englishReport 和 danishReport 名称更改为 EnglishReport 和 DanishReport 即可。

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