Как получить значение контекста из нормальной функции в реагировать родной? (Без useContext или компонентов класса)

Question

Мой сценарий ожидания следующий: у моего приложения есть два режима: Engli sh и Arabi c. Итак, сценарий, если режим арабский c, я должен сделать {flexDirection: 'row-reverse'}. Итак, мой текущий подход заключается в проверке режима приложения и применения стилей. Итак, я написал общую функцию для этого в отдельном файле, который возвращает измененные стили. Но некоторые ограничения Hooks не позволяют использовать 'useContext'. Мой фрагмент дает ошибку.

import {AppModeConsumer} from '../context/AppContext';
import {useContext} from 'react';

const styleFormat = style => {
  const mode = useContext(AppModeConsumer);
  console.log('MODE:', mode);
  if (mode === 'arabic') {
    if (style.flexDirection === 'row') {
      return Object.assign({}, style, {flexDirection: 'row-reverse'});
    }
  }
  return style;
};

Есть ли альтернативный способ получить значение этого контекста?

Answer 1

Я не совсем понял, что означает

Но некоторые ограничения Hooks не позволяют использовать 'useContext'

, но в любом случае рассмотрим один из них:

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

Во-вторых, вы всегда можете объявить styleFormat как StyleFormat компонент, который возвращает ноль

---

 import React, {useContext, useEffect} from 'react';
 import {AppModeConsumer} from '../context/AppContext';

 const StyleFormat = style => {
   const mode = useContext(AppModeConsumer);
   console.log('MODE:', mode);
   useEffect(()=> {
     if (mode === 'arabic' && style.flexDirection === 'row') 
       Object.assign({}, style, {flexDirection: 'row-reverse'});
  }, [mode]);

  return null //as for component UI presentation
 }

---

и используйте его как обычный <StyleFormat style={somePropStyle} />

Answer 2

Если вы следуете "Правилам хуков" , то единственным "ограничением", о котором вы можете говорить, является предупреждение lint.

Имена пользовательских хуков должны быть с use префикс:

const useStyleFormat = style => {...};