Реагировать на API контекста, устанавливать состояние контекста из дочерних компонентов вместо передачи функций в качестве реквизита

Question

В документации React говорится, что функция, определенная в корневом компоненте, должна передаваться дочернему компоненту, если вы планируете обновить контекст из вложенного компонента.

Я реализовал то же самое:

import React from 'react';

const DataContext = React.createContext();

/**
 * The App.
 */
export default class App extends React.Component {
    constructor() {
        super();

        this.updateGreet = this.updateGreet.bind( this );

        this.state = {
            greet: '',
            updateGreet: this.updateGreet
        }
    }

    updateGreet() {
        this.setState({
            greet: 'Hello, User',
        });
    }

    render() {
        return (
            <DataContext.Provider value={ this.state }>
                <GreetButton />
                <DisplayBox />
            </DataContext.Provider>
        )
    }
}

/**
 * Just a button element. On clicking it sets the state of `greet` variable.
 */
const GreetButton = () => {
    return (
        <DataContext.Consumer>
            {
                ( { updateGreet } ) => {
                    return <button onClick={ updateGreet }>Greet</button>
                }
            }
        </DataContext.Consumer>
    )
}

/**
 * Prints the value of `greet` variable between <h1> tags.
 */
const DisplayBox = () => {
    return (
        <DataContext.Consumer>
            {
                ( { greet } ) => {
                    return <h1>{ greet }</h1>
                }
            }
        </DataContext.Consumer>
    )
}

Это очень простое приложение React, которое я создал для изучения Context API. Я пытаюсь добиться определения метода updateGreet() внутри компонента GreetButton вместо определения его внутри компонента App, поскольку функция не имеет ничего общего с компонентом App.

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

Есть ли способ, которым мы можем достичь этого?

Answer 1

Я бы сказал, что updateGreet метод имеет отношение к App, так как он манипулирует App состоянием.

Я не рассматриваю это как проблему, зависящую от контекста, так как обычную реакцию реагируют на передачу функций дочерним компонентам.

Чтобы выполнить ваше желание, вы могли бы связать и передать метод App setState поставщику, а затем внедрить updateGreet в компоненте GreetButton, но это было бы против и я бы не советовал.

Когда я работаю с Context API, я обычно определяю свой контекст в отдельном файле и внедряю собственного провайдера в соответствии со своими потребностями, передавая связанные методы и свойства и используя их по всему дереву по мере необходимости.

По сути, реализуйте то, что у вас есть в App как его собственный Провайдер класс GreetProvider. В методе рендеринга для GreetProvider просто передайте дочерние элементы через:

render() {
        return (
            <DataContext.Provider value={ this.state }>
                { this.props.children }
            </DataContext.Provider>
        )
    }

Теперь вся ваша логика приветствия может жить вместе с источником в контексте. Используйте ваш новый GreetProvider класс в App, и любой из его потомков сможет использовать его методы.