Как получить данные из React Context Consumer вне рендера

Я использую новый API контекста React и мне нужно получить данные Consumer из переменной Context.Consumer и не использовать его внутри метода render. В любом случае, я могу достичь этого?

Укажите, что я хочу:

console.log(Context.Consumer.value);

То, что я тестировал до сих пор: приведенный выше пример, протестировал Context.Consumer currentValue и другие переменные, которые Context Consumer использовал, попытался выполнить Context.Consumer() как функцию, и никто не работал.

Любые идеи?

Ответ 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.

Если вы используете экспериментальный синтаксис полей открытого класса, вы можете использовать статическое поле класса для инициализации 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);

Ответ 2

Попробуйте это

class ThemedButton extends Component{
constructor(props){
 super(props);
  this.state={
   consumedValue=null;
 }
}
 render(){
  return (
    <ThemeContext.Consumer>
      {theme =>  (this.setState({consumedValue=theme}))}
    </ThemeContext.Consumer>
  )
 }
}

Ответ 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>
)