Question

使用React，我正在为使用本地存储或会话存储的插件编写代码，具体取决于调用它的应用程序。通过将可选参数传递给默认为本地存储的组件来进行设置。如果我们的Web服务使用的是插件，则它将传入会话存储方法。由于限制，我们的桌面应用不会传入参数，因此我们默认使用组件中的本地存储。

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

我知道这违反了钩子规则。从技术上讲，它可以编译并运行良好，因为每个渲染都取决于它所渲染的环境。我仍然想找到一种更好的方法来完成此任务，这样我的小子就不会再抱怨它了。

Answer 1

为什么不只包装组件。

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

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

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

解决React中有条件使用自定义钩子的问题

1 个答案: