freeCodeCamp/guide/russian/react/render-props-component/index.md

title, localeTitle

title	localeTitle
Render Props Component	Рендеринг props компонент

Рендеринг props компонент

Рендеринг props - это передовая модель React, да, так просто!

пример

Это пример того, как вы можете использовать render prop для функции переключения.

import React, { PureComponent } from "react"; 
 
class Toggle extends PureComponent { 
  state = { 
    on: false 
  }; 
 
  toggle = () => { 
    this.setState({ 
      on: !this.state.on 
    }); 
  }; 
 
  render() { 
    const { children } = this.props; 
    return children({ 
      on: this.state.on, 
      toggle: this.toggle 
    }); 
  } 
} 
 
export default Toggle; 

Этот компонент Toggle возвращает состояние его дочерних элементов state.on и функцию toggle. Которые могут быть использованы в его дочерних компонентах.

Этот Toggle можно использовать следующим образом:

<Toggle> 
  {({ on, toggle }) => ( 
    <Fragment> 
      <button onClick={toggle}>Show / Hide</button> 
      {on && <h1>I can be toggled on or off!</h1>} 
    </Fragment> 
  )} 
</Toggle> 

Как вы можете заметить, функция переключения может использоваться дочерней кнопкой Button для переключения некоторого содержимого. if on is true, h1-tag будет отображаться иначе.

Другие источники

• React docs: Render реквизит