2018-10-12 20:00:59 +00:00
---
title: Render Props Component
2018-11-22 18:49:48 +00:00
localeTitle: Рендеринг props компонент
2018-10-12 20:00:59 +00:00
---
2018-11-22 18:49:48 +00:00
## Рендеринг props компонент
2018-10-12 20:00:59 +00:00
2018-11-22 18:49:48 +00:00
Рендеринг props - это передовая модель React, да, так просто!
2018-10-12 20:00:59 +00:00
### пример
Это пример того, как вы можете использовать render prop для функции переключения.
```jsx
import React, { PureComponent } from "react";
2018-11-22 18:49:48 +00:00
class Toggle extends PureComponent {
2018-10-12 20:00:59 +00:00
state = {
on: false
};
toggle = () => {
this.setState({
on: !this.state.on
});
};
render() {
const { children } = this.props;
return children({
on: this.state.on,
toggle: this.toggle
});
}
2018-11-22 18:49:48 +00:00
}
2018-10-12 20:00:59 +00:00
2018-11-22 18:49:48 +00:00
export default Toggle;
2018-10-12 20:00:59 +00:00
```
2018-11-22 18:49:48 +00:00
Этот компонент Toggle возвращает состояние е г о дочерних элементов `state.on` и функцию toggle. Которые могут быть использованы в е г о дочерних компонентах.
2018-10-12 20:00:59 +00:00
Этот Toggle можно использовать следующим образом:
```jsx
< Toggle >
{({ on, toggle }) => (
< Fragment >
< button onClick = {toggle} > Show / Hide< / button >
{on & & < h1 > I can be toggled on or off!< / h1 > }
< / Fragment >
)}
2018-11-22 18:49:48 +00:00
< / Toggle >
2018-10-12 20:00:59 +00:00
```
2018-11-22 18:49:48 +00:00
Как вы можете заметить, функция переключения может использоваться дочерней кнопкой Button для переключения некоторого содержимого. if on is true, h1-tag будет отображаться иначе.
2018-10-12 20:00:59 +00:00
## Другие источники
2018-11-22 18:49:48 +00:00
* [React docs: Render реквизит ](https://reactjs.org/docs/render-props.html )