将函数传递给自定义钩子

Question

这是我的自定义组件。基本上它的作用是显示 api 调用失败或成功的模式。

export const useMessageModal = () => {
  const [IsModalVisible, setIsModalVisible] = useState(false);
  const [Message, setMessage] = useState(null);

  return [
    () =>
      IsModalVisible ? (
        <CModal
          isVisible={IsModalVisible}
          modalMsg={Message}
          onPressModal={() => setIsModalVisible(false)} //hideModal
        />
      ) : null,
    () => setIsModalVisible(true), //showModal
    msg => setMessage(msg),
  ];
};

在其中一个组件中，我想导航到另一个页面或在模式按钮上调用一些上下文操作，因为我想将一些函数传递给这个自定义挂钩。有人有什么主意吗？

---

根据 Shubham Verma 的回答，我已经更新了我的代码

import React, { useState, useEffect } from "react";
import "./styles.css";

const CModal = ({ onPressModal }) => {
  return (
    <div
      onClick={() => {
        console.log("TEst");
        onPressModal();
      }}
    >
      Click me to check function call(open console)
    </div>
  );
};

export const useMessageModal = (customFuntion) => {
  const [IsModalVisible, setIsModalVisible] = useState(false);
  const [Message, setMessage] = useState(null);

  return [
    () =>
      IsModalVisible ? (
        <CModal
          isVisible={IsModalVisible}
          modalMsg={Message}
          onPressModal={customFuntion} //hideModal
        />
      ) : null,
    () => setIsModalVisible(true), //showModal
    (msg) => setMessage(msg)
  ];
};

export default function App() {
  const [test2, setTest2] = useState(false);
  const [test, check] = useMessageModal(
    () => (test2 ? console.log("gjghjgj") : console.log("hello")),
    [test2]
  );
  useEffect(() => {
    check();
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={() => [console.log(test2), setTest2(!test2)]}>
        test
      </button>
      {test()}
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Answer 1

您可以简单地将函数作为参数传递给 ins useMessageModal。这是 poc：

import React, { useState, useEffect } from "react";
import "./styles.css";

const CModal = ({ onPressModal }) => {
  return (
    <div
      onClick={() => {
        console.log("TEst");
        onPressModal();
      }}
    >
      Click me to check function call(open console)
    </div>
  );
};

export const useMessageModal = (customFuntion) => {
  const [IsModalVisible, setIsModalVisible] = useState(false);
  const [Message, setMessage] = useState(null);

  return [
    () =>
      IsModalVisible ? (
        <CModal
          isVisible={IsModalVisible}
          modalMsg={Message}
          onPressModal={customFuntion} //hideModal
        />
      ) : null,
    () => setIsModalVisible(true), //showModal
    (msg) => setMessage(msg)
  ];
};

export default function App() {
  const [test, check, anotherCheck] = useMessageModal(() =>
    console.log("hello")
  );
  useEffect(() => {
    check();
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {test()}
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

这是演示：https://codesandbox.io/s/custom-hook-function-37kc8? file=/src/App.js