Как использовать React.useContext в функции, которая не отображает никаких компонентов? - PullRequest
Новая
       104

Как использовать React.useContext в функции, которая не отображает никаких компонентов?

0 голосов
/ 14 июля 2020

Мне нужно получить текущее значение контекста внутри функции, которая вызывается для определенного c события, а не внутри средства визуализации.

Пример:

logCurrentTheme . js

import React, { useContext } from 'react';
import {ThemeContext} from "./ThemeContext";
// ThemeContext is a context created by React.createContext()

function logCurrentTheme() {
  const context = useContext(ThemeContext);
  console.log(context.themeColor)
}
export {logCurrentTheme};

в каком-то другом компоненте, который у меня есть 

//...
import {logCurrentTheme} from "./logCurrentTheme.js";
//...
const someComponent () => {
  return(
    <Button onClick={logCurrentTheme} title="Log Current Theme"/>
  );
}

Приведенный выше пример успешно компилируется, но после нажатия кнопки он выдает ошибка:

Неверный вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента

Я понимаю, что это «функция», а не «функциональный компонент». Но как еще я могу это сделать?

Изменить:

Рабочий пример на основе ответа @ tudor

LogContextButton. js

import React from "react";
import { useContextHelper } from "./ContextHelper";

export const LogContextButton = props => {
  var { logCurrentContextValue } = useContextHelper();
  return <button onClick={logCurrentContextValue}>{props.children}</button>;
};

ContextHelper. js

import { useContext } from "react";
import { Context } from "./Context";

export const useContextHelper = () => {
  const currentValue = useContext(Context);
  const logCurrentContextValue = () => console.log(currentValue);
  return { logCurrentContextValue };
};

1 Ответ

2 голосов
/ 14 июля 2020

Вы должны создать ловушку, которая возвращает вам эту logCurrentTheme функцию: 

export const useThemeHelper() {
  const {themeColor} = useContext(ThemeContext);
  
  const logCurrentTheme = () => console.log(themeColor);
  return {logCurrentTheme};
}

...

// and in your component: 
const SomeComponent () => {
  const {logCurrentTheme} = useThemeHelper();
  return(
    <Button onClick={logCurrentTheme} title="Log Current Theme"/>
  );
}

Вы не можете использовать ловушку вне другой ловушки или компонента.

...