React build删除组件类的名称

Question

I'm making a fullscreen rotating noticeboard in React with create-react-app.

The App component contains many Screen components, each one containing one child component (named such as WiFiPassword, OpenTimes, Events...) - and the Screen component checks if the current item from App is the name of it's child, and if it is then it shows that screen, if not then it hides it.

This is the code where the values are checked:

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
    }
  }
  ...
}

This works really well when running in development.

When I run npm run build and the process is finished, I load up the app and it doesn't work - it appears that the build process scrubs the class names from elements, which then means nothing is ever shown.

When I console.log() both the active prop and the child class name I get this:

active: WiFiPassword

elemName: t

Whatever screen it is on, elemName , which is the name of Screen 's child, is always t

Is there a way to retain the name of a component in react through the build process?

Answer 1

It looks like, you should switch to use react-router-dom, because you will have a good way to manage your screens. There is a good component Switch, that shows one component at the time:

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>

more information here: https://reacttraining.com/react-router/web/api/Switch

Answer 2

So I found a way around this: instead of relying on the class name, I instead imported every one of my <Screen> elements using a screens/index.js file:

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

Then imported that index, file with each screen available to me:

import * as Screens from './screens'

Then I use whatever screen I want, depending on the same logic from within App:

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