6 ms·
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:
by jaredgrippe 12y ago
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 12y agoThis 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-%20Core/03%20-%20Stateless%20Functions.js https://github.com/reactjs/react-future/blob/master/01%20-%2...
- spicyj 12y agoThe 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.)