Tengo una función getFontColor(), que me gustaría extraer a una carpeta de utilidades y llamarla en un componente. Sin embargo, esta función usa una función que está dentro de mi componente (getBgColor()). ¿Cómo paso getBgColor a la función util y cómo llamo a la función util en mi componente?
Función de utilidad que quiero extraer:
export const getFontColor = () => { const bgColor = getBgColor(); return something; };Función getBgColor() que está dentro del componente:
const getBgColor = () => { return something };Llamando a la función util:
<StyledTitle color={getFontColor}> {node.label} </StyledTitle>¿Cómo puedo comunicarlos? El problema principal es ¿cómo paso getBgColor a la función externa?
Simplemente pase su getBgColor a su función utils. En Javascript, las funciones son objetos de primera clase, por lo que se comportan como cualquier otro objeto, como un int o una lista. Eso significa que puede usar funciones como argumentos para otras funciones.
// 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> ); }