React buildはコンポーネントクラスの名前を削除します

Question

私はcreate-react-appと反応してフルスクリーンの回転掲示板を作っています。

Appコンポーネントは、多くのScreenのコンポーネントが含まれている、（WiFiPassword、OpenTimes、イベントなどの名前...）1つのコンポーネントを含む各1 - そしてそれは子供だのAppから現在の項目が名前である場合Screenコンポーネントをチェックし、それが表示されている場合はその画面を表示し、そうでない場合は非表示にします。

これは、値がチェックされているコードです：

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()アクティブ小道具と子のクラス名の両方が、私はこれを取得：Screen年代の名前である、それは上にあるものは何でも画面

active: WiFiPassword

elemName: t

、elemNameを、子は、常にですt

ビルドプロセスを通じて反応するコンポーネントの名前を保持する方法はありますか？

Answer 1

https://reacttraining.com/react-router/web/api/Switchは、だから私は、これを回避する方法を見つけました：代わりにクラス名に頼るので、私が代わりにインポート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/>

Answer 2

あなたは画面を管理する良い方法があるので、react-router-domを使用するように切り替える必要があります。優れたコンポーネント・スイッチがあり、それは一度に一つのコンポーネントを示しています

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> 

ここ

より多くの情報：