Javascript 将道具从函数传递到全局上下文提供程序

我正在寻找帮助，了解如何从

子组件的
函数中向上下文提供程序传递
道具

我有一个全局提供程序，我想保存表单中的
数据
，更具体地说，如果
onSubmit
失败，则保存
错误
数据

使用
createContext
我有一个全局提供者

import React, { createContext } from 'react';

interface InterfaceProps {
  children?: any;
}

interface InterfaceState {
  error: any;
  toggleAuthError: any;
}

const GlobalContext = createContext({
  error: null,
  toggleAuthError: () => {}
});

export class GlobalProvider extends React.Component<InterfaceProps, InterfaceState> {
  public toggleAuthError = ({ authError }: any) => {
    this.setState({ error: authError });
  };

  public state = {
    error: null,
    toggleAuthError: this.toggleAuthError
  };

  public render() {
    const { children } = this.props;
    return <GlobalContext.Provider value={this.state as any}>{children}</GlobalContext.Provider>;
  }
}

export const GlobalConsumer = GlobalContext.Consumer;

如何将
error
传递到上下文提供程序中的
this.toggleAuthError
？
您应该使用GlobalConsumer包装子组件，以便访问上下文值。大概是这样的：

<MyContext.Consumer>
  {({toggleAuthError}) => /* render something based on the context value */}
</MyContext.Consumer>


{（{toggleAuthError}）=>/*基于上下文值*/}呈现某些内容

然后，您只需使用
上下文将
toggleAuthError
传递给handleFormSubmit函数。
正如Ovidiu所指出的那样。如果您的组件是函数组件，那么Consumer
非常棒

但如果您的组件扩展了React.component，则可以使用它。这允许您使用
This.Context
使用该上下文类型的最接近的当前值

使用此设置，您可以在回调函数中访问
toggleAuthError
方法

在您的
子组件中（如果是类），您将使用：

static contextType = GlobalContext;

然后可以使用
this.context.toggleAuthError
访问
toggleAuthError
方法

下面的示例显示了两种方法-
Context.contextType
和
Context.Consumer
来使用上下文的两部分（
error
，和
toggleauthror
）


const GlobalContext=React.createContext({
错误：0，
toggleAuthError:（）=>{}
});
类GlobalProvider扩展了React.Component{
建造师（道具）{
超级（道具）；
this.toggleAuthError=（newError）=>{
this.setState（state=>({
错误：newError
}))
};
此.state={
错误：0，
toggleAuthError:this.toggleAuthError，
};
}
render（）{
返回(
{this.props.children}
)
}
}
常数形式=（）=>{
返回(
)
}
//使用context.contextType使用上下文的React组件
类TogleAuthErrorButton扩展React.Component{
静态上下文类型=全局上下文；
toggleError=（）=>{
返回this.context.toggleAuthError（this.context.error+1）；
}
render（）{
返回(
切换验证错误
)
}
}
//使用context.Consumer使用上下文的函数组件
常量错误=（）=>{
返回(
{（{error}）=>{
返回(
错误{Error}
)
}}
)
}
类应用程序扩展了React.Component{
render（）{
返回(
)
}
}
ReactDOM.render（，document.getElementById（'root'））

非常感谢。但是，使用此方法，我在类型“IntrinsicattAttributes&InterfaceProps”.ts（2322）
上得到一个属性“toggleAuthError”不存在的错误。知道为什么吗？那是打字错误。您需要为toggleAuthError变量定义一个类型，或者如果不想处理此变量的类型，只需在变量后面加上any。（{toggleAuthError}:any）=>…谢谢。我已经做过了，但还是不行。我会提出另一个问题，然后我会接受你的问题。由于我们的组件库，我避免了这种方式，但通过引入父级并向下传递
toggleAuthError
它会起作用。只是希望能在函数本身中实现一个解决方案。感谢您的帮助。我发布了一个替代解决方案，显示如何在回调函数中访问
toggleauthror
方法。我更新了解决方案，以显示如何将新值传递给
toggleauthror
函数。您需要
toggleauthror
函数来更新
状态。error
传递给
toggleAuthError
。我已经更新了解决方案，以展示如何做到这一点。非常感谢您抽出时间。我一写下那篇评论，就意识到我的错误并改正了。
static contextType = GlobalContext;