更新

Question

我正在使用新的React Context API，我需要从Context.Consumer变量中获取Consumer数据，而不是在render方法中使用它。无论如何我能做到这一点吗？

例如，我想要的是：

console.log(Context.Consumer.value);

到目前为止我测试的内容：上面的示例，测试了Context.Consumer currentValue和Context Consumer所具有的其他变量，尝试将Context.Consumer（）作为函数执行，但没有一个工作。

有什么想法吗？

Answer 1

更新

从 React v16.6.0 开始，您可以使用上下文API，如：

class App extends React.Component {
    componentDidMount() {
       console.log(this.context);
    }
    render() {
       // render part here
       // use context with this.context
    }
}
App.contextType = CustomContext

但是，该组件只能访问单个上下文。要使用多个上下文值，请使用渲染道具模式。有关Class.contextType的更多信息。

如果您使用的是实验public class fields syntax，则可以使用静态类字段初始化contextType：

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* render something based on the value */
  }
}

渲染道具模式

当我从问题中理解时，要在组件内使用上下文但在渲染之外，创建一个HOC来包装组件：

const WithContext = (Component) => {
  return (props) => (
      <CustomContext.Consumer>
           {value =>  <Component {...props} value={value} />}
      </CustomContext.Consumer>
  )
}

然后使用它：

class App extends React.Component {
    componentDidMount() {
       console.log(this.props.value);
    }
    render() {
       // render part here
    }
}
export default WithContext(App);

Answer 2

您可以通过不受支持的吸气剂：

YourContext._currentValue

请注意，它仅在渲染期间起作用，而在异步功能或其他生命周期事件中不起作用。

Answer 3

这是可以实现的方式。

 class BasElement extends React.Component {
  componentDidMount() {
    console.log(this.props.context);
  }

  render() {
    return null;
  }
}

const Element = () => (
  <Context.Consumer>
    {context =>
      <BaseMapElement context={context} />
    }
  </Context.Consumer>
)

Answer 4

您可以使用useContext Hook在功能组件中实现此目的。

您只需要从初始化文件中导入上下文即可。在这种情况下，DBContext。

 const contextValue = useContext(DBContext);

Answer 5

要使@wertzguy解决方案有效，您需要确保商店的定义如下：

// store.js
import React from 'react';

let user = {};
const UserContext = React.createContext({
  user,
  setUser: () => null
});

export { UserContext };

那你就可以做

import { UserContext } from 'store';

console.log(UserContext._currentValue.user);

如何从渲染之外的React Context Consumer获取数据

5 个答案:

更新

渲染道具模式