javascript - React build 删除组件类的名称

Question

我正在使用 create-react-app 在 React 中制作一个全屏旋转布告栏。
App组件包含很多 Screen组件，每个组件包含一个子组件(命名为 WiFiPassword、OpenTimes、Events...) - 以及 Screen组件检查当前项目是否来自 App是它的 child 的名字，如果是，则显示该屏幕，如果不是，则隐藏它。

这是检查值的代码:

class Screen extends Component {

  componentDidUpdate() {
    const active = this.props.active; // The active item, from parent state
    const elemName = this.props.children.type.name; //The name of the child class
    ...
    if(active === elemName){
      //If we have a match, then show this screen
    }
  }
  ...
}

这在开发中运行时非常有效。

当我跑 npm run build并且该过程已完成，我加载了应用程序但它不起作用 - 构建过程似乎从元素中删除了类名，这意味着什么都没有显示。

当我 console.log()事件 Prop 和子类名称我都得到了:
active: WiFiPassword elemName: t
无论它在哪个屏幕上， elemName ，这是 Screen 的名称的 child ，永远是 t
有没有办法在构建过程中保留组件的名称？

Answer 1

所以我找到了解决这个问题的方法:我没有依赖类名，而是导入了我的 <Screen> 中的每一个。元素使用 screens/index.js文件:
...
export {default as Welcome} from './Welcome'
export {default as WiFi} from './WiFi'
...
然后导入该索引文件，每个屏幕都可供我使用:
import * as Screens from './screens'
然后我使用我想要的任何屏幕，这取决于 App 中的相同逻辑:
const Component = Screens[this.state.slide];
<Component/>