mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-24 04:33:10 +00:00
Add mini example to top of Render Props
This commit is contained in:
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user