将 props 从函数传递给全局上下文提供者

Question

我寻求帮助，了解如何传递props到上下文提供从内部的function一个的child组成部分。我有一个全局提供程序，我想data从表单中保存它，更具体地说error是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;然后在我的表单child组件中，我有一个名为onSubmit.public handleFormSubmit = async (data: { email: string; password: string }) => {    const { form } = this.props;    const { email, password } = data;    await form      ...      .catch((error: any) => {        toggleAuthError(error); // Want this to trigger the function and pass error to the context provider        this.setState({          loading: false        });      });  };如何在上下文提供程序中传递error给this.toggleAuthError？

Answer 1

您应该使用 GlobalConsumer 包装您的子组件，以便访问上下文值。像这样的东西：

<MyContext.Consumer>

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

</MyContext.Consumer>

然后您可以简单地将 传递toggleAuthError给 handleFormSubmit 函数。