Question

我正在使用create-react-app在React中制作全屏旋转布告栏。

App组件包含许多Screen个组件，每个组件包含一个子组件（名称为WiFiPassword，OpenTimes，Events ...） - Screen组件检查是否App中的当前项目是其子项的名称，如果是，则显示该屏幕，如果没有，则隐藏它。

这是检查值的代码：

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()活动道具和子类名称时，我得到了这个：

active: WiFiPassword

elemName: t

无论屏幕是什么，elemName，Screen的孩子的名字，始终为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

所以我找到了解决这个问题的方法：而不是依赖于类名，而是使用<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/>

React build删除组件类的名称

2 个答案: