首页 > 解决方案 > 无法在反应中呈现组件

问题描述

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

<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;

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

标签: javascriptreactjs

解决方案


自定义组件名称需要以大写字母开头,否则 Babel 会将其视为字符串

englishReport将anddanishReport名称更改为EnglishReportandDanishReport它将起作用。

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

推荐阅读