View settings.json
{ | |
"always_show_minimap_viewport": true, | |
"bold_folder_labels": true, | |
"caret_extra_bottom": 1, | |
"caret_extra_top": 1, | |
"caret_extra_width": 1, | |
"caret_style": "blink", | |
"color_scheme": "Packages/Colorsublime - Themes/LAZY.tmTheme", | |
"create_window_at_startup": false, | |
"fade_fold_buttons": false, |
View settings.json
// Place your settings in this file to overwrite the default settings | |
{ | |
"editor.wordWrap": "on", | |
"editor.tabSize": 2, | |
"editor.mouseWheelZoom": false, | |
"guides.enabled": false, | |
"terminal.integrated.fontSize": 17, | |
"editor.fontSize": 20, | |
"window.zoomLevel": 0, | |
"sublimeTextKeymap.promptV3Features": true, |
View hoc-caveat-02-fix.js
import hoistNonReactStatic from 'hoist-non-react-statics'; | |
const withSearch = (WrappedComponent) => { | |
class WithSearch extends React.Component {/*...*/} | |
hoistNonReactStatic(EithSearch, WrappedComponent); | |
return WithSearch; | |
} | |
// Define a static method | |
ProductsList.staticMethod = function() {/*...*/} |
View hoc-caveat-01.js
render() { | |
// A new version of ProductsListWithSearch is created on every render | |
const ProductsListWithSearch = withSearch(ProductsList); | |
// That causes the entire subtree to unmount/remount each time! | |
return <ProductsListWithSearch />; | |
} |
View hoc-withSearch.js
const withSearch = WrappedComponent => { | |
class WithSearch extends React.Component { | |
state = { | |
searchTerm: "" | |
}; | |
handleSearch = event => { | |
this.setState({ searchTerm: event.target.value }); | |
}; | |
render() { |
View hoc-ProductsList.js
const ProductsList = (props) => { | |
let { data: products } = props; | |
return ( | |
<div> | |
<div> | |
<div> | |
<h2>Products</h2> | |
</div> | |
</div> | |
<div> |
View hoc-ProductsWithSearch.js
import products from './products.json' | |
class ProductsListWithSearch extends React.PureComponent { | |
state = { | |
searchTerm: '' | |
} | |
handleSearch = event => { | |
this.setState({ searchTerm: event.target.value }) | |
} | |
render() { |
View hoc-ProductCard.js
const ProductCard = props => { | |
return ( | |
<div className="product"> | |
<p> | |
<b>Title:</b> {props.title} | |
</p> | |
<p> | |
<b>Style:</b> {props.style} | |
</p> | |
<p> |
View hoc-ppHOC.js
const propsProxyHOC = (WraapperComponent) => { | |
return class extends React.Component { | |
state = { | |
count: 0 | |
} | |
render() { | |
// Pass thru the props that the HOC receives | |
return <WraapperComponent {...this.props} {...this.state} /> | |
} | |
} |
View hoc-withSearch-full-example.js
const ProductCard = props => { | |
return ( | |
<div> | |
<hr /> | |
<p> | |
<b>Title:</b> {props.title} | |
</p> | |
<p> | |
<b>Style:</b> {props.style} | |
</p> |
NewerOlder