ReactJS — Как вернуть строку из функционального компонента?

#javascript #reactjs #next.js #components #client

Вопрос:

В react я использую @apollo/client для внутренних API. В appollo.js я пытаюсь вызвать внутреннюю ссылку API на основе условия.

Прямо сейчас appollo.js содержит только функции, а не компонент.

Я пытаюсь добавить в него функцию statsig, const featureOn = useGate(<FEATURE_GATE_NAME>).value;

Как я могу использовать переменную statsig внутри appollo.js ?

Также я попытался создать отдельный компонент и сделать его похожим <AbcComponent /> , но он не возвращает требуемое значение.

AbcComponent.js,

 export const AbcComponent = () => {
  const featureOn = useGate('abc').value
  return featureOn ? 'Yes' : 'no'
}
 

В этом сценарии, как я могу получить «Да/Нет» от appollo.js ?

Ответ №1:

Компонент в react всегда должен возвращать JSX . что вам здесь нужно, так это пользовательский крючок.

 export const useCheckFeatureOn = () => {
    const featureOn = useGate('abc').value
    return featureOn ? 'Yes' : 'no'
  }
 

Используйте вышеуказанный крючок везде, где вы хотите использовать значение

 const isFeatureOn = useCheckFeatureOn();
 

Комментарии:

1. Но useCheckFeatureOn не могу позвонить напрямую appollo.js, это должно быть правильно внутри компонента.

2. @ShruthiR Один из способов использовать крючки внутри клиента apollo — переместить содержимое apollo.js в App.js и выполнить инициализацию apollo там.