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

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”导入React；
const DataContext=React.createContext（）；
/**
*应用程序。
*/
导出默认类App扩展React.Component{
构造函数（）{
超级（）；
this.updateGreet=this.updateGreet.bind（this）；
此.state={
问候：''，
UpdateGet:this.UpdateGet
}
}
updateGreet（）{
这是我的国家({
问候：“你好，用户”，
});
}
render（）{
返回(
)
}
}
/**
*只是一个按钮元素。单击它可设置“greet”变量的状态。
*/
常量GreetButton=（）=>{
返回(
{
（{updateGreet}）=>{
回礼
}
}
)
}
/**
*在标记之间打印'greet'变量的值。
*/
常量显示框=（）=>{
返回(
{
（{greet}）=>{
返回{greet}
}
}
)
}

这是我为学习上下文API而创建的一个非常简单的React应用程序。我试图实现的是在

GreetButton

组件中定义

updateGet（）

方法，而不是在

App

组件中定义它，因为函数与

App

组件无关

我看到的另一个优点是，如果我选择完全删除

GreetButton

组件，那么我就不需要跟踪它在其他组件中定义的所有方法

---

有什么方法可以做到这一点吗？

我认为

updateGreet

方法确实与

App

有关，因为它是在操纵

App

状态

我不认为这是一个特定于上下文的问题，而是将函数传递给子组件的常规做法

为了实现您的愿望，您可以绑定并将

App

的

setState

方法传递给提供者，然后在

GreetButton

组件中实现

updateGet

，但这是一种反模式，我不推荐这样做

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

本质上，将

App

中的内容实现为自己的提供者类

GreetProvider

。在

GreetProvider

的渲染方法中，只需将子对象传递给以下对象：

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

render（）{
返回(
{this.props.children}
)
}

---

现在，所有问候语逻辑都可以在源代码处与上下文一起使用。在

App

中使用新的

GreetProvider

类，它的任何子类都可以使用它的方法。

您可以在任何地方传递

setState

并定义方法（哇，您可以随时扩展可能性）。。。但你可能不知道上下文是什么意思。