我可以将函数提取到 utils 文件中，然后在 React 组件中使用它，同时将函数从组件传递给它吗？

发布于 2025-01-10 21:01:56 字数 570 浏览 0 评论 0原文

我有一个函数 getFontColor()，我想将其提取到 utils 文件夹中，并在组件中调用它。不过，这个函数使用了我的组件内部的函数（getBgColor()）。如何将 getBgColor 传递给 util 函数以及如何在组件中调用 util 函数？

我想提取的 Util 函数：

  export const getFontColor = () => {
    const bgColor = getBgColor();   
    return something;
  };

组件内部的函数 getBgColor()：

  const getBgColor = () => {
    return something
  };

调用 util 函数：

 <StyledTitle color={getFontColor}>
   {node.label}
 </StyledTitle>

我如何传达这些功能？主要问题是如何将 getBgColor 传递给外部函数？

原文

I have a function getFontColor(), that I would like to extract to a utils folder, and call it in a component. This function though, uses a function that is inside my component (getBgColor()). How do I pass getBgColor to the util function and how to I call the util function in my component?

Util function I want to extract:

  export const getFontColor = () => {
    const bgColor = getBgColor();   
    return something;
  };

Function getBgColor() which is inside the component:

  const getBgColor = () => {
    return something
  };

Calling the util function:

 <StyledTitle color={getFontColor}>
   {node.label}
 </StyledTitle>

How can I communicate those? The main issue, is how do I pass the getBgColor to the external function?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

或十年 2025-01-17 21:01:56

只需将您的 getBgColor 函数传递给您的 utils 函数即可。在 Javascript 中，函数是第一类对象，因此它们的行为与任何其他对象（例如 int 或列表）类似。这意味着您可以使用函数作为其他函数的参数。

// utils.js
export const getFontColor = async (props) => {
  const fontColor = await getFontColorAsync(props);
  return fontColor;
}

const getFontColorAsync = async ({ getBgColor }) => {
  const bgColor = getBgColor();  
  return something;
}

//component.jsx
import { getFontColor } from "./utils.js"

function Component() {
  const getBgColor = () => {
    return something;
  };

  const fontColor = getFontColor({ getBgColor });

  return (
    <StyledTitle color={fontColor}>
      {node.label}
    </StyledTitle>
  );
}

Just pass your getBgColor-function to your utils-function. In Javascript functions are first class objects, so they behave like any other object, such as an int or a list. That means that you can use functions as arguments to other functions.

// utils.js
export const getFontColor = async (props) => {
  const fontColor = await getFontColorAsync(props);
  return fontColor;
}

const getFontColorAsync = async ({ getBgColor }) => {
  const bgColor = getBgColor();  
  return something;
}

//component.jsx
import { getFontColor } from "./utils.js"

function Component() {
  const getBgColor = () => {
    return something;
  };

  const fontColor = getFontColor({ getBgColor });

  return (
    <StyledTitle color={fontColor}>
      {node.label}
    </StyledTitle>
  );
}

回复收藏 0 原文

~没有更多了~