Обновление значений контекста Reacts из компонентов класса

Question

У меня есть компонент класса в приложении React. Оно работает. Тогда мне нужна глобальная переменная и дошел до контекста Реакта. Я создаю контекст и могу потреблять его значение.

Но мне нужно обновить его значение, я много читаю и, похоже, мне нужно использовать React Hooks для обновления значения Context. Но мои компоненты являются компонентами класса, и там я не могу использовать хуки.

Мой вопрос: если я хочу использовать контексты, я не могу использовать компоненты класса? Прямо сейчас я изучаю React и много раз встречался с Hooks. Если перехватывает очень важную вещь, это значит, что мы должны постоянно использовать функциональные компоненты?

Что мне делать? Мне просто нужно обновить мою глобальную переменную и использовать ее значение.

Answer 1

Если я хочу использовать контексты, я не могу использовать компоненты класса?

Нет, вы можете использовать контекст либо в компонентах класса. См. Контекстный раздел в документации, все примеры с классами.

Мы должны постоянно использовать функциональные компоненты?

Нет, вы можете используйте любой подход, который вы считаете подходящим.

Но нет никакой реальной причины использовать компоненты класса больше (за исключением реализации Error Boundary ). React официально рекомендует с использованием хуков и состав , поэтому предпочтительным подходом является Function Components.

Что мне делать? Мне просто нужно обновить мою глобальную переменную и использовать ее значение.

Глобальная переменная в качестве названия, ее global в области приложения (и не привязана к области компонента, например штат). Вы можете обновить его с везде .

const globalObject = { name: `myVar` };

// Can be updated from any scope as you keep the reference.
const FunctionComponent = () => { globalObject.name=`a`; return <></>; }

// Outer scope
globalObject.name=`b`;

Answer 2

Пожалуйста, перейдите по этой ссылке, https://www.taniarascia.com/using-context-api-in-react/ и Как обновить React Context из дочернего компонента? . это объясняется в этой ссылке, вы можете сделать это так:

class LanguageSwitcher extends Component {
  render() {
return (
  <LanguageContext.Consumer>
    {({ language, setLanguage }) => (
      <button onClick={() => setLanguage("jp")}>
        Switch Language (Current: {language})
      </button>
    )}
  </LanguageContext.Consumer>
);
  }
}