gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Minor corrections (#32632)

Browse Source 
Added clarification to the HOC definition, as well as some minor grammar corrections throughout.
This commit is contained in:
Garrett
2019-04-07 17:39:02 +09:00
committed by The Coding Aviator
parent a803330c4b
commit 15181b616c
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
guide/english/react/higher-order-components/index.md
View File

@ -3,7 +3,8 @@ title: Higher-Order Components
--- ---
## Higher-Order Components ## Higher-Order Components
In React, a **Higher-Order Component** (HOC) is a function that takes a component and returns a new component. Programmers use HOCs to achieve **component logic reuse**.
In React, a **Higher-Order Component** (HOC) is a function that takes a component as an argument and returns a new component. Programmers use HOCs to achieve **component logic reuse**.
If you've used Redux's `connect`, you've already worked with Higher-Order Components. If you've used Redux's `connect`, you've already worked with Higher-Order Components.
@ -15,7 +16,7 @@ const EnhancedComponent = enhance(WrappedComponent);
Where: Where:
* `enhance` is the Higher-Order Component; * `enhance` is the Higher-Order Component;
* `WrappedComponent` is the component you want to enhance; and * `WrappedComponent` is the component you want to enhance; and
* `EnhancedComponent` is the new component created. * `EnhancedComponent` is the newly created component.
This could be the body of the `enhance` HOC: This could be the body of the `enhance` HOC:
```jsx ```jsx
@ -38,9 +39,9 @@ function enhance(WrappedComponent) {
In this case, `enhance` returns an **anonymous class** that extends `React.Component`. This new component is doing three simple things: In this case, `enhance` returns an **anonymous class** that extends `React.Component`. This new component is doing three simple things:
* Rendering the `WrappedComponent` within a `div` element * Rendering the `WrappedComponent` within a `div` element;
* Passing its own props to the `WrappedComponent` * Passing its own props to the `WrappedComponent`; and
* Injecting an extra prop to the `WrappedComponent` * Injecting an extra prop into the `WrappedComponent`.
### Caveats ### Caveats
Higher-order components come with a few caveats that aren’t immediately obvious if you’re new to React. Higher-order components come with a few caveats that aren’t immediately obvious if you’re new to React.