Возврат другого компонента через Render Props

"Перейти к содержанию"

Допустим, вы отправляете кнопку от родителя к дочернему элементу, используя реквизиты рендеринга. Как правильно отобразить и разместить возвращаемую кнопку?

Как оказалось, это совсем несложно.

Допустим, это ваш компонент, который использует реквизиты рендеринга для возврата как состояния переключения, так и кнопки переключения.

const React = require('react');
class ToggleProvider extends React.Component{
    constructor(){
        super();
        this.state = {
            toggle: false
        };
    }
    handleToggle = () => {
        this.setState({toggle: !this.state.toggle});
    };
    renderToggle = () => {
        return (
            <button onClick={this.handleToggle}>
                Toggle Me
            </button>
        );
    };
    render() {
        return this.props.children({
            buttonState: this.state.toggle ? "true" : "false",
            button: this.renderToggle()
        });
    }
}
module.exports = ToggleProvider;

Чтобы использовать вышеуказанный провайдер, у вас может возникнуть соблазн (из-за шаблонов) сделать это.

<ToggleProvider>{
    ({toggleButton, toggleState}) => (
        <div className='my-container'>
            <toggleButton />
            State: {toggleState}
        </div>
    )}
</ToggleProvider>

Однако, поскольку родитель уже отобразил кнопку, дочернему элементу нужно только разместить отрисованный компонент, как если бы это была любая другая переменная.

<ToggleProvider>{
    ({toggleButton, toggleState}) => (
        <div className='my-container'>
            {toggleButton}
            State: {toggleState}
        </div>
    )}
</ToggleProvider>

Вот и все.

Первоначально опубликовано на redsunsoft.com 6 августа 2018 г.