React 构建删除组件名称 class

Question

我正在用 create-react-app.

在 React 中制作一个全屏旋转布告牌

App 组件包含许多 Screen 组件，每个组件包含一个 child 组件（命名为 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
    }
  }
  ...
}

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

当我运行 npm run build 并且该过程完成时，我加载了该应用程序但它不起作用 - 构建过程似乎从中清除了 class 名称元素，这意味着什么都不会显示。

当我 console.log() 活动道具和 child class 名称时，我得到这个：

active: WiFiPassword

elemName: t

无论在什么屏幕上，elemName，即 Screen 的 child 的名称，始终是 t

有没有办法在构建过程中保留组件的名称？

Answer 1

看来，您应该改用 react-router-dom，因为您将有一个很好的方式来管理您的屏幕。有个不错的组件Switch，一次显示一个组件：

import { Switch, Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

更多信息在这里：https://reacttraining.com/react-router/web/api/Switch

Answer 2

所以我找到了解决这个问题的方法：我没有依赖 class 名称，而是使用 screens/index.js 文件导入了我的每个 <Screen> 元素：

... export {default as Welcome} from './Welcome' export {default as WiFi} from './WiFi' ...

然后导入该索引文件，每个屏幕都可供我使用：

import * as Screens from './screens'

然后我使用我想要的任何屏幕，这取决于应用程序中的相同逻辑：

const Component = Screens[this.state.slide]; <Component/>

React 构建删除组件名称 class

React build removes name of component class

javascript

class

build

reactjs

create-react-app