javascript - React Context API，从子组件设置上下文状态而不是将函数作为 Prop 传递

Question

React 文档说，如果您计划从嵌套组件更新上下文，则将 Root 组件中定义的函数作为 prop 传递给子组件。

我已经实现了相同的:

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>
    )
}

这是我为学习 Context API 而创建的一个非常简单的 React 应用程序。我想要实现的是在 GreetButton 组件中定义 updateGreet() 方法，而不是在 App 组件中定义它，因为函数与 App 组件无关。

我看到的另一个优点是，如果我选择完全删除 GreetButton 组件，那么我就不需要跟踪它使用的所有在另一个组件中定义的方法。

我们有什么办法可以做到这一点吗？

Answer 1

我认为 updateGreet 方法确实与 App 有关，因为它正在操纵 App 状态.

我不认为这是一个特定于上下文的问题，而是将函数向下传递给子组件的正常 React 实践。

为了实现您的愿望，您可以绑定(bind) App 的 setState 方法并将其传递给提供者，然后实现 updateGreet 在 GreetButton 组件中，但这是一种反模式，我不推荐它。

当我使用 Context API 时，我通常在一个单独的文件中定义我的上下文并实现一个自定义提供程序以满足我的需要，向下传递相关的方法和属性并根据需要在整个树中使用它们。

本质上，将 App 中的内容实现为它自己的 Provider 类 GreetProvider。在 GreetProvider 的 render 方法中，简单地传递 children :

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

现在，您所有的问候语逻辑都可以在源头与上下文共存。在 App 中使用新的 GreetProvider 类，它的任何子级都可以使用它的方法。