Javascript 如何有条件地返回Java脚本中的函数

发布于12月25日

我只是try 创建一个Reaction Native库，目前我有一个可以用来声明我的函数的用例

const show = useMyHook()个

或

const {show, hide} = useMyHook()个

useMyHook.js

const useMyHook = () => {
  const MyCTX = useContext(MyContext);
  if (!MyCTX) {
    throw new Err或('useMyHook must be defined.');
  }
  // how do i conditionally return
  // return {show: MyCTX.show, hide:MyCTX.hide}
  // and
  // return MyCTX.show
  return MyCTX.show;
};

exp或t default useMyHook;

what should i do to make useMyHook() accept both of them? 或 is it not possible?

我希望useMyHook()可以接受这两个变量的主要原因是，当开发人员只想调用show()作为函数时，可以将任何东西命名为变量，如下所示:

const showMyHookInBannerHomepage = useMyHook()个

i think it's m或e simple rather than

const {show:showMyHookInBannerHomepage} = useMyHook()个

推荐答案

我能想到的一种方法是，通过返回一个附加了属性的函数，使钩子同时适用于这两种用例.类似于:

function useMyHook() {
  const MyCTX = useContext(MyContext);
  if (!MyCTX) {
    throw new Error("useMyHook must be defined.");
  }

  // Create a function that calls MyCTX.show
  const callableFunction = function() {
    return MyCTX.show();
  };

  // Attach show and hide properties to the function
  callableFunction.show = MyCTX.show;
  callableFunction.hide = MyCTX.hide;

  return callableFunction;
}

// Usage 
// Either
const { show, hide } = useMyHook();
// Or
const show = useMyHook();

一百零二

Alternative Approach

另一种方法是要求您对钩子使用一个参数(如果您想要更改钩子的签名)，您可以基于该参数有条件地使用它们.示例将如下所示:

const useMyHook = (returnObject = false) => {
  const MyCTX = useContext(MyContext);
  if (!MyCTX) {
    throw new Error('useMyHook must be defined.');
  }
  // Conditionally return based on the `returnObject` parameter
  if (returnObject) {
    return {show: MyCTX.show, hide: MyCTX.hide};
  } else {
    return MyCTX.show;
  }
};

// To use

// Just get the `show` function
const show = useMyHook();

// Get both `show` and `hide` functions in an object
const {show, hide} = useMyHook(true);

SIDENOTE:个