Last active
February 26, 2018 14:06
-
-
Save misterfresh/846b3bff678bfa005a7fa3476b352b6d to your computer and use it in GitHub Desktop.
Use slots instead of props
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // don't do | |
| let AddItemToCartButton = ({icon, title}) => <button>{!!icon && <i className={'fa fa-' + icon}/>}{title}</button> | |
| // this forces you to add a prop | |
| <AddItemToCartButton title=”Add item to cart” /> | |
| // and with icon | |
| <AddItemToCartButton title=”Add item to cart” icon="plus"/> | |
| //do | |
| let AddItemToCartButton = ({children}) => <button>{children}</button> | |
| //this is more explicit | |
| <AddItemToCartButton>Add item to cart</AddItemToCartButton> | |
| // even better with icon | |
| <AddItemToCartButton><i className="fa fa-plus"/>Add item to cart</AddItemToCartButton> | |
| //in Vue JS use the default slot to achieve the same thing | |
| <template> | |
| <button> | |
| <slot></slot> | |
| </button> | |
| </template> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment