amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-25 23:05:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #767 from koba04/customizing-display-name-ref-forwarding

Browse Source 
Add a section "Customizing Name in DevTools" in Forwarding Refs
This commit is contained in:
Brian Vaughn
2018-04-11 08:17:28 -07:00
committed by GitHub
parent d7f675d418 e26547bfc6
commit d453c2c8fb
6 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
content/docs/forwarding-refs.md
View File

@@ -20,3 +20,18 @@ This means that refs intended for our `FancyButton` component will actually be a
Fortunately, we can explicitly forward refs to the inner `FancyButton` component using the `React.forwardRef` API. `React.forwardRef` accepts a render function that receives `props` and `ref` parameters and returns a React node. For example:
`embed:forwarding-refs/log-props-after.js`
## Displaying a custom name in DevTools
`React.forwardRef` accepts a render function. React DevTools uses this function to determine what to display for the ref forwarding component.
For example, the following component will appear as "*ForwardRef*" in the DevTools:
`embed:forwarding-refs/wrapped-component.js`
If you name the render function, DevTools will also include its name (e.g. "*ForwardRef(myFunction)*"):
`embed:forwarding-refs/wrapped-component-with-function-name.js`
You can even set the function's `displayName` property to include the component you're wrapping:
`embed:forwarding-refs/customized-display-name.js`