Блог

Используя React, я пишу код для плагина, который использует локальное хранилище или хранилище сеанса в зависимости от приложения, которое его вызывает. Он настраивается путем передачи необязательных параметров компоненту, который по умолчанию используется для локального хранилища. Если наш веб-сервис использует плагин, он передает методы хранения сеанса. Из-за ограничений наше настольное приложение не передает параметры, и поэтому мы по умолчанию используем локальное хранилище внутри компонента.

 export function myComponent(optionalParameter?: string, storeOptionalParameter?: (selection: string) => void) {
    const [variable, storeVariable] = optionalParameter amp;amp; storeOptionalParameter
        ? [optionalParameter, storeOptionalParameter]
        : useLocalStorage<string>('storageName', 'default');
}
  

Я знаю, что это нарушает правила хуков. Технически он компилируется и выполняется просто отлично, поскольку каждый рендеринг будет зависеть от среды, в которой он отображается. Я все еще хотел бы найти лучший способ добиться этого, чтобы мой линтер перестал жаловаться на это.

Почему бы просто не обернуть компонент.

 function Component({variable, storeVariable}) {
  ...
}

function ComponentThatUsesStore() {
  const [variable, storeVariable] = useLocalStorage<string>('storageName', 'default');
  return (<Component variable={variable} storeVariable={storeVariable} />)
}

function ParentComponent(...) {
   if (optionalParameter amp;amp; storeOptionalParameter) {
     return (
       <Component
         variable={optionalParameter}
         storeVariable={storeOptionalParameter}
       />
     );
   }
   return <ComponentThatUsesStore />;
}