Javascript 无法正确导入或获取特定容器

我一直在尝试在一个文件中创建组件类，并将它们默认导出到另一个文件中，在该文件中它们被导入并显示在另一个组件类中（所有这些都是为了保持代码干净）

但是我在让代码显示在我创建的网页上时遇到了问题

下面是我的App.js中的代码

import React, { Component } from 'react';
import './App.css';
import user_Preference_Nav from './topUserPreferences.js';  // import from the external file

    class FavouritesOptionsModule extends Component {
      render() {
      return (
        <div>
           <user_Preference_Nav />
        </div>
  
  
     )
  }
}


class FavouriteSection extends Component {
  render() {
    return (
      <div style={{flex: '0 1 48.5%'}}>
        <h2>{this.props.heading}</h2>
        <div style={{...StyleFrame}}>
          <FavouritesOptionsModule/> //the outer container for the imported classes gets instantiated here.. this all gets shown correctly, its just the content within this instantiated class that isint properly shown.
          <div style={{...StyleItemList}}>
             <FavouriteItem/>
            <FavouriteItem/>
            <FavouriteItem/>
            <FavouriteItem/>
            <FavouriteItem/>
            <FavouriteItem/>
            <FavouriteItem/>
          </div>
        </div>
      </div>
    )
  }
} // and there is another class that gets instantiated as an outer component to this one, but i feel like that info is redundant as all outer containers display correctly its just the "<user_Preference_Nav />" from the "topUserPreferences.js" file that isint properlt shown...

import React，{Component}来自'React'；
导入“/App.css”；
从“./topUserPreferences.js”；/”导入用户首选项导航从外部文件导入
类FavoriteSoptionsModule扩展组件{
render（）{
返回(
)
}
}
类FavoriteSection扩展组件{
render（）{
返回(
{this.props.heading}
//导入类的外部容器在这里实例化。所有这些都正确显示，只是实例化类中的内容没有正确显示。
)
}
}//还有另一个类被实例化为这个类的外部组件，但我觉得该信息是多余的，因为所有外部容器都正确显示了它只是显示在“topUserPreferences.js”文件中的“”而已。。。

下面是外部文件“topUserPreferences.js”中的组件类

import React，{Component}来自'React'；
导入“/App.css”；
从“@material ui/core/Radio”导入无线电；
从“@material ui/core/RadioGroup”导入射线组；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/FormControl”导入FormControl；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Slider”导入滑块；
类用户首选项导航扩展组件{
render（）{
返回(
)
}
}
导出默认用户\首选项\导航//默认导出
类用户首选项滑块扩展组件{
render（）{
函数值文本（值）{
返回`${value}对象`；
}
返回(
极限
)
}
}
类用户首选项按钮扩展组件{
render（）{
返回(
走！
)
}
}
类用户\首选项\时间格式扩展组件{
render（）{
返回(
{/*labelPlacement*/}
)
}
}

我期待这些容器出现在页面上，但所发生的只是实际的标签本身 “”显示为文本，而不是其中的实际代码

请容忍我的反应，因为我是一个新手，这绝对是一个新手问题

---

我也知道在组件中有很多组件。。。因此，如果您在理解我的代码流时遇到任何问题，请务必让我知道……）

用户定义组件–与标准HTML组件相反。React知道您是想使用自己的组件还是使用标准HTML标记

组件

user\u Preference\u Nav

以小写字母开头，因此React会将其呈现为HTML字符串

，这显然不是您想要的

将组件重命名为

class User_Preference_Nav extends Component {
  //  ^
  // ...
}

它应该像预期的那样工作

class User_Preference_Nav extends Component {
  //  ^
  // ...
}