JavaScript minification and React

I need to traverse over a set of child elements and find out the class type of each child element. In development I can do it easily over child.constructor.name or over child.type.name. But in production all names are uglifyed (like described here https://github.com/facebook/react-devtools/issues/239) and I don’t know what to do about this. Simply don’t use minifiers package is not a option :slight_smile:

Is there a way in Meteor to whitelist particular attributes for uglifyjs? Or some other minifier packages that working correctly with react?

Thank you

I’m curious why you need to do this traversal - maybe there is a better way?

Hi sashko. Yes maybe there is a better way because I’m new to React. What I am trying to do, is to pass properties to the child elements. But only to children from specific type. An example look like this:

<Form>
  <Email name="myEmail" />
  <Button text="Submit" />
</Form>

I have a Form component as a parent and different input types as its children. The render method from the Form component look like this:

render() {
  let self = this;
  let childs = '';
  if (self.props.children.length > 0) {
    childs = self.props.children.map(function(child, i) {
      if (child.type && child.type.name && self.supportedTypes.indexOf(child.type.name) > -1){
        return React.cloneElement(child, {
          key: 'formInput'+i,
          registerElement: self.registerElement.bind(self),
          unregisterElement: self.unregisterElement.bind(self)
        });
      } else {
        return child;
      }
    });
  } else {
    childs = self.props.children;
  }

  return (
    <form onSubmit={ self.handleSubmit.bind(self) }>
      {childs}
    </form>
  );
}

What I am trying to do here is to pass some callback functions to the children which they should call when they are mounted or unmounted. But not all of them. Button for example should not have this callbacks. And that is why I need to check the type. Don’t know, is there a better way to solve this problem? Otherwise I need to whitelist the type.name attribute. I found a better solution by using default props and check if this property exists.

I think another good solution is to use react context. That’s a thing that lets you indirectly pass data to all children.

1 Like

Great! Thank you for the advice with contextTypes. This is much much cleaner now.