From 15181b616c95a282e8533b10d3a661ecf5f06a5f Mon Sep 17 00:00:00 2001 From: Garrett Date: Sun, 7 Apr 2019 17:39:02 +0900 Subject: [PATCH] Minor corrections (#32632) Added clarification to the HOC definition, as well as some minor grammar corrections throughout. --- guide/english/react/higher-order-components/index.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/guide/english/react/higher-order-components/index.md b/guide/english/react/higher-order-components/index.md index 9e07c604e5..309e85dd56 100644 --- a/guide/english/react/higher-order-components/index.md +++ b/guide/english/react/higher-order-components/index.md @@ -3,7 +3,8 @@ title: 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. @@ -15,7 +16,7 @@ const EnhancedComponent = enhance(WrappedComponent); Where: * `enhance` is the Higher-Order Component; * `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: ```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: - * Rendering the `WrappedComponent` within a `div` element - * Passing its own props to the `WrappedComponent` - * Injecting an extra prop to the `WrappedComponent` + * Rendering the `WrappedComponent` within a `div` element; + * Passing its own props to the `WrappedComponent`; and + * Injecting an extra prop into the `WrappedComponent`. ### Caveats Higher-order components come with a few caveats that aren’t immediately obvious if you’re new to React.