fix(guide): correct some small typos (#30748)

This commit is contained in:
Eric Hartline
2019-01-18 18:44:26 -06:00
committed by Tom
parent d80b374bc1
commit b96a865a30

View File

@ -3,7 +3,7 @@ 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 return 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 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.
@ -38,9 +38,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`; and * Passing its own props to the `WrappedComponent`
* Injecting an extra prop to the `WrappedComponent`. * Injecting an extra prop to the `WrappedComponent`
### Caveats ### Caveats
Higher-order components come with a few caveats that arent immediately obvious if youre new to React. Higher-order components come with a few caveats that arent immediately obvious if youre new to React.
@ -63,7 +63,6 @@ function enhance(WrappedComponent) {
}) })
} }
``` ```
HOCs are just a pattern that uses the power of React's compositional nature. **They add features to a component**. There are a lot more things you can do with them!
## Other Resources ## Other Resources
* [React docs: Higher-Order Components](https://reactjs.org/docs/higher-order-components.html) * [React docs: Higher-Order Components](https://reactjs.org/docs/higher-order-components.html)