[jaredgrippe]

One of my favorite patterns in React is using functions to wrap a React component.

It goes something like this:

  App.Button = React.createClass({
    render: function(){
      var className = 'btn '+this.props.className
      <a href className={className}>{this.props.children}</a>
    }
  });

  App.BigButton = function(props){
    props = props || {};
    props.className = 'btn-large '+props.className
    return App.Button.apply(null, arguments)
  };

How would you do something like this?

[sebmarkbage]

This is actually an anti-pattern that we're explicitly trying to get rid of. The fewer components you have, the fewer optimization hooks you have. This also have subtle changes in semantics, and disables local optimizations in the consuming files.

The idea of a lightweight declaration of a component (e.g. a just function) is definitely still on the table and might be resurrected in a different form.

https://github.com/reactjs/react-future/blob/master/01%20-%2...

[spicyj]

The suggested way of doing this is define a new component like so:

  var BigButton = React.createClass({
    render: function() {
      return (
        <Button
          {...this.props}
          className={'btn-large ' + this.props.className} />
      );
    }
  });

(Before React 0.12 introduced the JSX spread syntax, this was handled by transferPropsTo.)