Browse Source

Add mini example to top of Render Props

main
Alex 7 years ago
committed by GitHub
parent
commit
581eafc049
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 12
      content/docs/render-props.md

12
content/docs/render-props.md

@ -6,6 +6,18 @@ permalink: docs/render-props.html
The term ["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) refers to a simple technique for sharing code between React components using a prop whose value is a function.
A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
```jsx
<DataProvider render={data => (
<h1>Hello {data.target}</h1>
)}/>
```
Libraries that use render props include [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) and [Downshift](https://github.com/paypal/downshift).
In this document, we’ll discuss why render props are useful, and how to write your own.
## Use Render Props for Cross-Cutting Concerns
Components are the primary unit of code reuse in React, but it's not always obvious how to share the state or behavior that one component encapsulates to other components that need that same state.

Loading…
Cancel
Save