Reactjs 上下文API从任何地方消费

我正在尝试使用React上下文api将共享状态实现到我的应用程序中

我正在树的根目录下创建一个

errorContext

状态。错误上下文如下所示：

// ErrorContext.js
import React from 'react';
const ErrorContext = React.createContext({
    isError: false,
    setError:   (error) => {}
});

export default ErrorContext;

期望结果

• 我想从应用程序中的任何位置（特别是从承诺中）更新（使用）此上下文
• 理想情况下，应该将消费步骤提取到导出的助手函数中

助手函数的示例用法

http.get('/blah')
    .catch((error) => {
        HelperLibrary.setError(true);
    })

以下是react上下文文档： 我可以这样创建一个提供者：

class ProviderClass {
    state = {
        isError: false,
        setError: (error) => {
            this.state.isError = error;
        }
    }

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

为什么这不起作用？

出于某种原因，ReactDOM.render（）总是将此代码放在React组件树之外

<App>
    ...
        <ProviderClass>
            ...
            <div id="contextNodeInDOM'></div> <-- even though my node is here
            ...
        </ProviderClass>
</App>
<ErrorContext.Consumer></ErrorContext.Consumer> <-- ReactDOM.render puts the content here

如果上面没有此上下文的提供程序，则value参数
将等于传递给createContext（）的defaultValue

如果有人能在下一步帮助我，我来自Angular，如果我的术语不正确或我做了一些非常愚蠢的事情，我深表歉意。
您可以在导出之前导出一个HOC来包装错误组件，消除样板文件，并确保仅在需要时提供上下文，在不影响DOM的情况下：

// error_context.js(x)
export const withErrorContext = (Component) => {
  return (props) => (
    <ErrorContext.Consumer>
      {context => <Component {...props} errorContext={context} />}
    </ErrorContext.Consumer>
  )
};

// some_component.js(x)
const SomeComponent = ({ errorContext, ...props }) => {
  http.get('/blah')
      .catch((error) => {
        errorContext.setError(true);
      })

  return(
    <div></div>
  )
};

export default withErrorContext(SomeComponent);

//错误\u context.js（x）
导出常量上下文=（组件）=>{
返回（道具）=>(
{context=>}
)
};
//一些_component.js（x）
const SomeComponent=（{errorContext，…props}）=>{
http.get（'/blah'）
.catch（（错误）=>{
errorContext.setError（true）；
})
返回(
)
};
导出默认上下文（SomeComponent）；

现在React 16.8已经登陆，您也可以使用钩子更干净地执行此操作：

const SomeComponent = props => {
  const { setError } = useContext(ErrorContext)

  http.get("/blah").catch(() => setError(true))

  return <div />
}

const SomeComponent=props=>{
const{setError}=useContext（ErrorContext）
http.get（“/blah”）.catch（（）=>setError（true））
返回
}
您可以在导出之前导出HOC以包装错误组件，从而消除样板文件，并确保仅在需要时提供上下文，而不会影响DOM：

// error_context.js(x)
export const withErrorContext = (Component) => {
  return (props) => (
    <ErrorContext.Consumer>
      {context => <Component {...props} errorContext={context} />}
    </ErrorContext.Consumer>
  )
};

// some_component.js(x)
const SomeComponent = ({ errorContext, ...props }) => {
  http.get('/blah')
      .catch((error) => {
        errorContext.setError(true);
      })

  return(
    <div></div>
  )
};

export default withErrorContext(SomeComponent);

//错误\u context.js（x）
导出常量上下文=（组件）=>{
返回（道具）=>(
{context=>}
)
};
//一些_component.js（x）
const SomeComponent=（{errorContext，…props}）=>{
http.get（'/blah'）
.catch（（错误）=>{
errorContext.setError（true）；
})
返回(
)
};
导出默认上下文（SomeComponent）；

现在React 16.8已经登陆，您也可以使用钩子更干净地执行此操作：

const SomeComponent = props => {
  const { setError } = useContext(ErrorContext)

  http.get("/blah").catch(() => setError(true))

  return <div />
}

const SomeComponent=props=>{
const{setError}=useContext（ErrorContext）
http.get（“/blah”）.catch（（）=>setError（true））
返回
}

以下是react上下文文档：
我可以这样创建一个提供者：

class ProviderClass {
    state = {
        isError: false,
        setError: (error) => {
            this.state.isError = error;
        }
    }

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

类提供者类{
状态={
伊瑟罗：错，
setError：（错误）=>{
this.state.isError=错误；
}
}

我不这么认为-应该使用
setState
。react中有一条一般规则“不要改变状态-使用setState（）”-滥用会导致大部分react问题

我感觉您不了解上下文角色/用法。这更像是通往全局存储的捷径，无需通过深层组件结构（有时超过10个级别）将道具显式传递给儿童

应用程序>CtxProvider>路由器>其他>。>CtxConsumer>组件消费CtxStorePropsnMethods

在某些特殊情况下使用id访问渲染的DOM节点，通常应避免使用，，因为后续渲染将破坏外部所做的任何更改

如果需要在主react应用程序html节点之外的某个地方呈现某个内容，请使用。

以下是react上下文文档：
我可以这样创建一个提供者：

class ProviderClass {
    state = {
        isError: false,
        setError: (error) => {
            this.state.isError = error;
        }
    }

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

类提供者类{
状态={
伊瑟罗：错，
setError：（错误）=>{
this.state.isError=错误；
}
}

我不这么认为-应该使用
setState
。react中有一条一般规则“不要改变状态-使用setState（）”-滥用会导致大部分react问题

我感觉您不了解上下文角色/用法。这更像是通往全局存储的捷径，无需通过深层组件结构（有时超过10个级别）将道具显式传递给儿童

应用程序>CtxProvider>路由器>其他>。>CtxConsumer>组件消费CtxStorePropsnMethods

在某些特殊情况下使用id访问渲染的DOM节点，通常应避免使用，，因为后续渲染将破坏外部所做的任何更改

如果需要在主react应用程序html节点之外的某个地方呈现某个内容，请使用它。
上下文API的目的是不允许从任何地方使用它，而只允许在组件内部使用，否则它与任何应用程序范围的变量都没有区别。从角度来看，DI是这样的。您可以跳过样板代码，类似于answer建议。上下文API的目的是不允许从任何地方使用它，而只允许在组件内部使用它，否则它与任何应用程序范围的变量都没有区别。从角度来说，DI是这样。你可以跳过样板代码，就像答案所建议的那样。嗨，谢谢你的回答。当你说你不认为应该有一个setEr时ror，我想请您阅读上的React文档。另外，我认为您误读了我的问题，我不想在React主应用程序之外进行渲染，这就是问题所在。不幸的是，ReactDOM.render将节点放置在树之外。在
setError的主体中不应该使用
this.state.sth=