Added a Caveat section with a case (#21299)
Added a Caveat sub-section, and covered the refs aren't passed through case with an example. There are still a couple of more caveats. And left a reference to forwarding refs docs.
This commit is contained in:
@ -42,7 +42,29 @@ In this case, `enhance` returns an **anonymous class** that extends `React.Compo
|
|||||||
* Passing its own props to the `WrappedComponent`; and
|
* Passing its own props to the `WrappedComponent`; and
|
||||||
* Injecting an extra prop to the `WrappedComponent`.
|
* Injecting an extra prop to the `WrappedComponent`.
|
||||||
|
|
||||||
|
### Caveats
|
||||||
|
Higher-order components come with a few caveats that aren’t immediately obvious if you’re new to React.
|
||||||
|
|
||||||
|
#### Refs Aren't Passed Through
|
||||||
|
While the convention for higher-order components is to pass through all props to the wrapped component, this does not work for refs. That’s because `ref` is not really a prop — like `key`, it’s handled specially by React. If you add a ref to an element whose component is the result of a HOC, the ref refers to an instance of the outermost container component, not the wrapped component.
|
||||||
|
|
||||||
|
The solution for this problem is to use the React.forwardRef API (introduced with React 16.3)
|
||||||
|
```jsx
|
||||||
|
function enhance(WrappedComponent) {
|
||||||
|
const wrapper = React.createRef((props,ref) => {
|
||||||
|
return(
|
||||||
|
<div className="Wrapper">
|
||||||
|
<WrappedComponent
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
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!
|
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)
|
||||||
|
* [React docs: Forwarding Refs](https://reactjs.org/docs/forwarding-refs.html)
|
||||||
|
Reference in New Issue
Block a user